本文详解如何在浏览器环境中正确访问并使用外部javascript文件中定义的变量，重点解决作用域、执行时序及模块化打包带来的常见问题。
在前端开发中，将日期等动态内容注入HTML是基础但易出错的操作。你遇到的问题——structuredDate is not defined——本质源于三个关键原因：变量作用域隔离、脚本执行顺序不当，以及Browserify打包后未暴露全局变量。
首先，var structuredDate = ... 在 bscript.js 中属于模块作用域（尤其经 Browserify 打包后），默认不会挂载到全局 window 对象上，因此 HTML 内联脚本无法直接访问。其次，async defer 会导致 bscript.js 异步加载，其执行时机不可控，很可能晚于后续内联脚本，造成 structuredDate 尚未定义就已被读取。
✅ 正确做法分两种场景：
场景一：不依赖 Browserify（推荐快速验证）
直接引入 CDN 版本的 Moment.js，并在 HTML 中统一生成和写入日期（无需额外 JS 文件）：
立即学习“Java免费学习笔记（深入）”；
YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
Welcome to my website<br>
Today is: <div id="date"></div>
<script>
// 直接在全局作用域定义，确保可被后续脚本访问
const structuredDate = moment().format("LLLL"); // moment() 等价于 moment(Date.now())
document.getElementById("date").textContent = structuredDate;
</script>场景二：必须使用 Browserify 打包（生产环境）
需显式将变量暴露为全局属性，修改 bscript.js：
// bscript.js
var moment = require("moment");
// ✅ 显式挂载到 window 对象（仅限浏览器环境）
window.structuredDate = moment().format("LLLL");HTML 中移除 async defer（避免执行顺序不确定），并确保内联脚本在 bscript.js 之后执行：
<!-- 同步加载，保证执行顺序 -->
<script type="text/javascript" src="bundle.js"></script>
Welcome to my website<br>
Today is: <div id="date"></div>
<script>
// 此时 window.structuredDate 已就绪
document.getElementById("date").textContent = window.structuredDate;
</script>⚠️ 注意事项：
- require() 和 CommonJS 模块语法仅在 Node.js 或打包工具（如 Browserify）中有效，浏览器原生不支持；
- async/defer 会破坏依赖顺序，涉及跨脚本变量共享时应避免；
- 使用 textContent 替代 innerHTML 更安全（防止 XSS），除非你明确需要渲染 HTML；
- 建议用现代方案替代：如 ES 模块（<script type="module">）配合 export/import，或使用构建工具（Vite、Webpack）管理依赖。</script>
总结：变量跨文件共享的核心是可控的作用域与确定的执行时序。优先考虑逻辑内聚（如将 DOM 更新也写入 JS 文件），而非依赖全局变量；若必须跨脚本通信，请通过 window 显式暴露，并严格控制加载顺序。
