原生网页使用npm包moment时模块解析报错，如何解决？

问题根源 #

原生浏览器的ES模块系统不认npm包的裸模块名（比如"moment"），它要求模块路径必须是相对路径（.//../）、绝对路径或者完整URL，所以直接写import { moment } from "moment"会触发报错。

可行解决方案 #

1. 用相对路径直接导入node_modules里的文件 #

找到node_modules/moment目录下的入口文件（一般是moment.js），根据你的JS文件位置写相对路径：

// 假设你的JS文件在项目根目录，node_modules也在根目录
import moment from './node_modules/moment/moment.js';

注意：live-server默认允许访问node_modules，不用额外配置。

2. 改用CDN导入ES模块版本 #

直接在JS里导入moment的CDN链接，不用npm安装：

import moment from 'https://cdn.jsdelivr.net/npm/moment@2.29.4/dist/moment.min.js';

或者在HTML里先引入模块：

<script type="module" src="https://cdn.jsdelivr.net/npm/moment@2.29.4/dist/moment.min.js"></script>

3. 用打包工具处理（推荐长期项目） #

如果项目后续要扩展功能，用Vite、Webpack这类工具能自动解析裸模块名：

• 以Vite为例，先初始化项目：

npm create vite@latest my-project -- --template vanilla
cd my-project
npm install moment

• 然后在JS里直接写：

import moment from 'moment';

• 最后运行npm run dev启动开发服务器就行。

4. 配置package.json（兼容性有限） #

在项目根目录的package.json里加以下配置，让裸模块名指向具体文件：

{
  "type": "module",
  "exports": {
    "moment": "./node_modules/moment/moment.js"
  }
}

但这种方式只有部分现代浏览器和Node.js支持，不推荐用于兼容性要求高的项目。

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