使用Webpack时，在Backbone.js视图模板中访问JS模块的问题

你的核心问题是Webpack的模块隔离机制：视图文件里导入的custom.js属于Webpack的模块作用域，而Handlebars模板里的内嵌JS代码不在这个作用域内，所以直接调用会找不到函数。下面给你几种合规的解决方案，不用复制文件到dist目录：

方案1：注册Handlebars Helper（推荐） #

这是最符合Handlebars设计规范的方式，把自定义函数封装成模板助手：

1. 在加载模板的Backbone视图文件中，导入custom.js并注册Helper：

import Handlebars from 'handlebars';
import { doSomeTrick } from './path/to/custom.js';

// 注册模板助手，注意处理Helper的参数（最后一个参数是Handlebars上下文，需要排除）
Handlebars.registerHelper('doSomeTrick', function(...args) {
  args.pop(); // 移除最后一个上下文参数
  return doSomeTrick(...args);
});

2. 在Handlebars模板中直接调用这个Helper：

<!-- 原来的内嵌JS调用改成模板Helper语法 -->
{{doSomeTrick '参数1' '参数2'}}

<!-- 如果是在HTML事件中调用 -->
<button onclick="{{doSomeTrick '点击参数'}}">执行操作</button>

方案2：将函数挂载到全局作用域（快速迁移方案） #

如果你只是想快速解决迁移问题，不想修改太多模板代码，可以在main.js中把函数挂载到window对象上，让模板里的JS能直接访问：

// main.js 顶部导入并挂载
import { doSomeTrick } from './path/to/custom.js';
window.doSomeTrick = doSomeTrick;

之后模板里的内嵌JS就能直接调用doSomeTrick()，和旧版本的写法完全一致。注意这种方式会产生全局变量，长期来看建议逐步替换成方案1。

方案3：渲染模板时传入函数作为上下文数据 #

如果模板里的JS是在渲染后执行的逻辑，可以在视图渲染模板时把函数作为数据传入：

// Backbone视图的render方法中
import { doSomeTrick } from './path/to/custom.js';
import template from './your-template.hbs';

render() {
  const html = template({
    // 其他模板数据
    doSomeTrick: doSomeTrick
  });
  this.$el.html(html);
  return this;
}

然后在模板中通过模板变量把函数绑定到局部变量使用：

<script>
  // 将模板传入的函数赋值给局部变量
  const doSomeTrick = {{doSomeTrick}};
  // 调用函数
  doSomeTrick('测试参数');
</script>

注意：这种方式适合简单场景，需确保模板渲染时函数能被正确识别。

为什么之前的尝试无效？ #

• 依赖视图中已导入的模块：Webpack的模块是作用域隔离的，视图里的变量不会自动暴露给模板的JS代码；
• 模板中用script标签引入：Webpack打包后文件路径会被重写，且未打包的文件不会出现在dist目录，自然找不到。

内容的提问来源于stack exchange，提问作者TituX75