如何在HTML中使用经Browserify打包的JS文件里定义的变量？

你的代码存在三个核心问题，逐一修正即可正常运行：

1. 变量名大小写不匹配 #

JavaScript是大小写敏感语言，你在bscript.js里定义的变量是structuredDate（小写开头），但HTML脚本里写成了StructuredDate（大写开头），这会导致脚本找不到目标变量。

2. Browserify打包的作用域限制 #

Browserify会将模块代码包裹在独立作用域中，默认情况下bscript.js里的structuredDate不会暴露到全局作用域，因此全局脚本无法直接访问该变量。

3. 脚本执行顺序冲突 #

你给引入的脚本添加了async defer属性，这会让浏览器异步加载并执行脚本，可能导致后面的全局脚本先运行，此时bscript.js里的变量还未定义。

推荐解决方案（无需全局变量） #

直接将修改DOM的逻辑整合到bscript.js中，既避免全局变量污染，又能保证执行顺序：

修改bscript.js：

var moment = require("moment")

var structuredDate = moment(Date()).format("LLLL");

// 等待DOM完全加载后再操作元素
document.addEventListener('DOMContentLoaded', function() {
  const dateElement = document.getElementById("date");
  if (dateElement) {
    dateElement.innerHTML = structuredDate;
  }
});

修改HTML（确保引入的是Browserify打包后的文件，比如打包生成的bundle.js）：

Welcome to my website<br>
Today is: <div id="date"></div>
<script type="text/javascript" src="bundle.js"></script>

备选方案（暴露全局变量） #

如果必须在全局脚本中访问变量，需要将structuredDate挂载到全局对象：

修改bscript.js：

var moment = require("moment")

var structuredDate = moment(Date()).format("LLLL");
// 将变量暴露到全局window对象
window.structuredDate = structuredDate;

修改HTML（去掉async defer，并将全局脚本放在打包脚本之后，同时用DOMContentLoaded确保DOM加载完成）：

Welcome to my website<br>
Today is: <div id="date"></div>
<script type="text/javascript" src="bundle.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  const date = document.getElementById("date");
  date.innerHTML = structuredDate;
});
</script>

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