本文详解如何将 javascript 文件中生成的变量（如日期）安全注入 html 页面，重点解决因模块化、执行时序及环境差异导致的常见错误。
在浏览器环境中直接使用 Node.js 风格的 require()（如 var moment = require("moment")）是不可行的——因为 require 是 Node.js 运行时的模块系统，原生浏览器不支持。你提到使用 Browserify 进行打包，这是正确的方向，但当前代码存在三个关键问题：
- 执行时机错位：<script async defer> 会异步加载并延迟执行，可能导致 HTML 中后续内联脚本（如 document.getElementById("date")）在 structuredDate 变量尚未定义或初始化完成前就运行；</script>
- 作用域隔离：Browserify 打包后的代码默认运行在模块作用域中，var structuredDate 不会自动挂载到全局 window 对象，因此内联脚本无法直接访问；
- 客户端无 require：未经打包的 .js 文件若直接通过 <script src> 引入，require("moment") 会抛出 ReferenceError。</script>
✅ 正确做法分两种场景：
✅ 场景一：纯前端（推荐初学者/轻量项目）
直接引入 CDN 版本的 Moment.js，并在全局作用域定义变量：
<!-- 先引入 Moment.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<!-- 再引入你的逻辑脚本（注意：移除 async/defer，确保顺序执行） -->
<script src="bscript.js"></script>
Welcome to my website<br>
Today is: <div id="date"></div>
<!-- 在 DOM 后执行，确保元素已存在 -->
<script>
// 直接使用 moment（全局可用）
const structuredDate = moment().format("LLLL"); // moment() 等价于 moment(Date.now())
document.getElementById("date").textContent = structuredDate;
</script>对应 bscript.js 可简化为（非必需，仅作逻辑复用）：
立即学习“Java免费学习笔记（深入）”；
// bscript.js —— 仅封装逻辑，不依赖 require
window.getFormattedDate = function() {
return moment().format("LLLL");
};然后在内联脚本中调用：
移动端UI&微信UI YDUI Touch
下载
YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。
document.getElementById("date").textContent = window.getFormattedDate();✅ 场景二：使用 Browserify（适合已有 npm 依赖的项目）
需确保：
- Browserify 已正确打包 moment 并暴露变量到全局；
- 脚本加载顺序严格：先加载 bundle.js，再操作 DOM。
bscript.js（源码）：
var moment = require('moment');
// 显式挂载到全局，供 HTML 内联脚本访问
window.structuredDate = moment().format("LLLL");构建命令：
browserify bscript.js -o bundle.js
HTML 中：
<script src="bundle.js"></script> <!-- 同步加载，不加 async/defer -->
Welcome to my website<br>
Today is: <div id="date"></div>
<script>
// 此时 window.structuredDate 已就绪
document.getElementById("date").textContent = window.structuredDate;
</script>⚠️ 重要提醒：
- 避免在 async/defer 脚本后立即操作 DOM，除非监听 DOMContentLoaded 或使用 window.onload；
- textContent 比 innerHTML 更安全（防止 XSS），除非你明确需要渲染 HTML；
- moment(Date()) 可简写为 moment()；Date() 返回字符串，而 moment() 接收 Date.now() 或 new Date() 更规范。
总结：浏览器端变量共享的核心原则是——显式挂载到 window，控制执行顺序，避开服务端语法。优先选择 CDN 方案快速验证，再逐步迁移到模块化构建流程。
