无法用ES6 Import/Export语法导入自制NPM包notifman

报错原因 #

浏览器原生ES模块解析器不支持直接导入"notifman"这类裸模块名，它只识别以/、./或../开头的相对/绝对路径，所以会抛出Failed to resolve module specifier错误。

可行方案（无需Webpack） #

方案1：生成浏览器兼容的UMD/ESM构建产物

用轻量构建工具（如Rollup、esbuild）生成可直接在浏览器使用的版本，步骤如下：

1. 安装Rollup（以Rollup为例）：

npm install rollup --save-dev

2. 新建rollup.config.js配置文件：

export default {
  input: 'index.js',
  output: [
    // UMD格式：支持script标签全局引入
    {
      file: 'dist/notifman.umd.js',
      format: 'umd',
      name: 'Notifman' // 全局变量名，用户可通过window.Notifman调用
    },
    // ESM格式：支持浏览器原生ES模块导入
    {
      file: 'dist/notifman.esm.js',
      format: 'esm'
    }
  ]
}

3. 在package.json中添加构建命令：

{
  "scripts": {
    "build": "rollup -c",
    // 保留原有scripts...
  }
}

4. 执行npm run build生成dist目录下的构建文件
5. 更新package.json，补充浏览器相关字段：

{
  "main": "index.js",
  "browser": "dist/notifman.umd.js", // 浏览器环境优先用UMD文件
  "module": "dist/notifman.esm.js", // ESM环境用这个文件
  // 其他字段...
}

用户使用方式：

• 全局引入（无需模块）：

<script src="node_modules/notifman/dist/notifman.umd.js"></script>
<script>
  const root = Notifman(); // 调用全局方法
  root.textContent = "hello world";
</script>

• 原生ES模块导入：

<script type="module">
  import getRoot from './node_modules/notifman/dist/notifman.esm.js';
  getRoot().textContent = "hello world";
</script>

方案2：使用浏览器原生Import Maps

现代浏览器支持Import Maps特性，可直接映射裸模块名到文件路径：

1. 在HTML中添加Import Map配置：

<script type="importmap">
{
  "imports": {
    "notifman": "./node_modules/notifman/index.js"
  }
}
</script>

2. 正常使用裸模块名导入：

<script type="module">
  import getRoot from "notifman";
  getRoot().textContent = "hello world";
</script>

注意：该特性需要在服务器环境下运行（不能直接打开本地HTML文件，会触发跨域限制），可通过npx serve启动本地测试服务器。

方案3：直接使用相对路径导入

让用户直接导入node_modules中的文件，无需额外配置：

<script type="module">
  import getRoot from './node_modules/notifman/index.js';
  getRoot().textContent = "hello world";
</script>

缺点是用户需要手动填写较长路径，体验不如前两种方案，但实现最简单。

额外优化 #

你的package.json中dependencies包含"notifman": "^1.0.3"，属于循环依赖，建议删除该条目。

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