Chrome扩展开发中如何导入npm包未在exports声明的文件

首先明确核心逻辑：所有现代前端打包工具（Vite、Webpack、Rollup等）默认遵循npm包package.json中exports字段的路径映射规则，未被exports声明的子路径会被工具主动拦截导入，这个限制是构建工具层的校验，不是npm包本身做了物理层面的访问限制，完全可以通过配置或导入方式绕过。
另外注意：Chrome扩展默认CSP禁止加载非同源远程脚本，CDN导入的方式本身就不符合扩展安全规范，下面所有方案都基于本地文件加载实现，天然满足CSP要求。

方案1：直接导入node_modules下的完整文件路径（零配置首选） #

不要使用包名/子路径的导入格式（这种格式会触发exports规则校验），直接写从当前文件到目标npm包文件的相对路径，完全跳过包解析流程。
比如原本会被拦截的写法：

// 触发exports校验，导入失败
import Yargs from 'yargs/browser.mjs'

改成定位到node_modules里的实际文件路径：

// 路径根据你当前文件的实际位置调整，直接指向物理文件
import Yargs from '../../node_modules/yargs/browser.mjs'

补充说明：yargs的browser.mjs是专门适配浏览器环境的构建产物，不依赖Node.js原生模块，适合Chrome扩展环境使用；默认exports指向的index.mjs是Node环境版本，导入后会因缺失fs、path等原生模块运行报错。
如果使用TypeScript遇到模块类型报错，在导入行上方加// @ts-ignore即可，不影响实际打包运行。这个方式对所有存在同类问题的嵌套依赖同样生效。

方案2：配置打包工具跳过指定包的exports校验（适合批量处理） #

如果项目里有多个依赖都存在未在exports暴露文件的需求，可以直接修改构建配置，针对特定包关闭exports字段的解析规则，一劳永逸。

Vite/Rollup 配置示例 #

// vite.config.js
export default {
  plugins: [
    {
      name: 'skip-npm-exports-check',
      resolveId(source, importer) {
        // 把需要跳过exports校验的包名加到这个列表里
        const skipPackages = ['yargs', 'yargs/helpers']
        if (skipPackages.some(pkg => source.startsWith(pkg))) {
          return this.resolve(source, importer, {
            skipSelf: true,
            custom: { 'node-resolve': { exports: false } }
          })
        }
      }
    }
  ]
}

Webpack 5+ 配置示例 #

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /node_modules[\\/](yargs|其他需要跳过的包名)/,
        resolve: {
          exportsFields: [] // 匹配到的包完全忽略exports字段配置
        }
      }
    ]
  }
}

配置完成后就可以正常用import Yargs from 'yargs/browser.mjs'的写法导入，不会再被拦截。

方案3：拷贝目标文件到项目源码目录（最稳妥无兼容问题） #

如果不想折腾构建配置，直接把node_modules/yargs/browser.mjs以及它依赖的、同样未被exports暴露的关联文件，拷贝到你自己项目的src源码目录下，当成项目自身的源码文件导入即可。
这种方式完全绕开npm包解析逻辑，所有脚本都是本地同源文件，100%符合Chrome扩展的CSP要求，不会出现任何构建或运行时的兼容问题。

❌ 不推荐方案：不要直接修改node_modules下包的package.json文件添加exports配置，重新执行npm install后所有修改都会被覆盖，无法持久化。

内容的提问来源于stack exchange，提问作者Alam Téllez