如何解决浏览器中引入自定义npm包时出现的‘Failed to resolve module specifier’错误？

问题背景 #

我开发了一个名为mynpmpackage的npm包，核心代码index.js如下：

export default const Sum = (a , b) => { return a + b }

对应的package.json配置：

{ 
  "name":"mynpmpackage", 
  "version":"1.0.0", 
  "main": "index.js", 
  "module": "index.js" 
}

已经通过npm publish成功发布。之后我在另一个目录中用npm install mynpmpackage安装了该包，编写了index.html：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Document</title> 
</head> 
<body> 
</body> 
<script type="module" src="test.js"></script> 
</html>

在test.js中尝试引入包时：

import Sum from "mynpmpackage"
alert(Sum(3,4))

出现错误：

Uncaught TypeError: Failed to resolve module specifier "mynpmpackage". Relative references must start with either "/", "./", or "../".

解决办法 #

这个错误的核心原因是：浏览器原生的ES模块系统不支持直接解析npm包名称，它只能识别相对路径、绝对路径或者完整的URL。下面是几种可行的解决方案：

1. 使用模块打包工具（推荐）

像Vite、Webpack、Rollup这类工具会帮你处理npm包的模块解析，把第三方包的代码打包到你的项目中，让浏览器能正常识别。以Vite为例：

• 初始化一个Vite项目：npm create vite@latest my-test-project -- --template vanilla
• 进入项目目录并安装你的包：cd my-test-project && npm install mynpmpackage
• 在项目的main.js中正常引入：

  import Sum from "mynpmpackage"
  alert(Sum(3,4))
  

• 运行npm run dev，打开浏览器就能正常运行了。

2. 通过CDN引入

如果不想用打包工具，可以借助CDN（比如unpkg、jsDelivr）直接引入包的ES模块版本。修改你的test.js：

// 指定版本号更稳定
import Sum from "https://unpkg.com/mynpmpackage@1.0.0"
alert(Sum(3,4))

unpkg会自动读取你包的package.json中的module字段，指向正确的文件路径。

3. 手动使用相对路径引用node_modules中的文件

这种方式比较直接，但不推荐用于生产环境（路径易变，部署时需要携带node_modules）：
修改test.js为：

import Sum from "./node_modules/mynpmpackage/index.js"
alert(Sum(3,4))

额外注意：修正包中的语法错误 #

你的index.js里有个语法错误：export default const Sum是无效的写法，正确的写法应该是：

// 方式一
const Sum = (a, b) => a + b;
export default Sum;

// 方式二（更简洁）
export default (a, b) => a + b;

先修正这个错误，重新发布包，否则即使解决了模块解析问题，包本身也无法正常使用。

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