如何在JavaScript文件中正确导入moment.js库？

错误原因分析 #

• Uncaught ReferenceError: require is not defined：require是Node.js专属的CommonJS语法，浏览器环境默认不支持该函数，直接使用会报错。
• Uncaught SyntaxError: import declarations may only appear at top level of a module：浏览器默认将脚本识别为普通脚本，而非ES模块，import语法仅能在ES模块中使用，需显式声明脚本类型。

具体解决方法 #

方法1：ES模块方式（推荐现代项目使用） #

1. 修改HTML脚本标签：给你的业务脚本标签添加type="module"属性，告知浏览器这是ES模块：

   <script type="module" src="./path/to/your-script.js"></script>
   

2. 在业务脚本中导入moment：确保路径正确（浏览器ES模块需要完整的.js后缀）：

   // 假设业务脚本在根目录，moment存放在lib/moment.js
   import moment from './lib/moment.js';
   // 测试使用
   console.log(moment().format('YYYY-MM-DD'));
   

   若下载的是UMD版本moment，需改用命名空间导入：import * as moment from './lib/moment.js';

方法2：传统全局引入方式 #

无需模块化语法，直接通过HTML脚本标签引入moment，之后即可在全局访问moment变量：

<!-- 先引入moment.js -->
<script src="./lib/moment.js"></script>
<!-- 再引入你的业务脚本 -->
<script src="./path/to/your-script.js"></script>

业务脚本中直接使用：

console.log(moment().format('YYYY-MM-DD'));

方法3：使用构建工具（适合复杂项目） #

如果项目使用Webpack、Vite等构建工具，可直接用require或import语法，构建工具会将代码打包为浏览器可识别的格式：

• CommonJS语法：

  const moment = require('../lib/moment');
  

• ES模块语法：

  import moment from '../lib/moment';
  

打包后在HTML中引入生成的bundle文件即可。

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