使用Browserify打包后在sign_up.liquid调用hello()出现引用错误的原因

你遇到的Uncaught ReferenceError错误，核心原因是Browserify会把所有模块封装在独立的闭包作用域里，不会自动将模块变量暴露到全局window对象，同时你的调用方式也存在小问题，咱们一步步拆解：

1. 先梳理代码里的逻辑问题 #

• 在main.js里，你把hello.js导出的函数赋值给了变量say，但这个say只存在于Browserify打包后的闭包作用域内，外部的<script>标签（也就是sign_up.liquid里的代码）根本访问不到它。
• 另外，就算say能被访问到，你写的say.hello()也是错误的——因为say本身就是hello函数（你在main.js里const say = require('./hello.js')，而hello.js导出的就是那个hello函数），正确的调用应该是say()，不是say.hello()。

2. 解决方法：把函数暴露到全局 #

要让sign_up.liquid里的代码能调用到这个函数，你需要手动把say挂载到全局的window对象上，修改你的main.js：

const say = require('./hello.js');
// 把say挂载到window，让全局作用域能访问
window.say = say;

然后重新用Browserify打包：

browserify ./public/js/main.js -o ./public/js/bundle.js

最后在sign_up.liquid里修正调用代码：

<script src="../js/bundle.js"></script>
<script>
  // 直接调用say()，因为say就是hello函数本身
  say();
</script>

3. 更优雅的替代方案（避免污染全局） #

如果你不想污染全局作用域，也可以考虑在main.js里直接触发函数，或者通过页面事件来调用，比如：

const say = require('./hello.js');
// 页面DOM加载完成后自动调用
document.addEventListener('DOMContentLoaded', function() {
  say();
});

这种方式就不需要在sign_up.liquid里额外写调用代码了。

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