不打包时如何在Web Worker中使用ES6模块库的部分代码？

针对你遇到的环境不支持模块类型Worker，且直接用import/动态import、importScripts带模块语句都报错的情况，这里有几个实用的解决方案：

1. 用打包工具单独打包Worker脚本 #

这是最靠谱的方案，虽然会生成新文件，但能彻底解决模块兼容问题。Rollup、Webpack这类工具可以把Worker依赖的所有ES6模块打包成一个独立的、无模块语法的脚本。

举个Webpack的简单配置例子：

// webpack.config.js
module.exports = {
  entry: './src/your-worker-script.js',
  output: {
    filename: 'worker.bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader' // 可选，转译ES6到更低版本兼容旧环境
      }
    ]
  }
};

打包完成后，主线程里直接引用这个打包后的文件：

// 主线程代码
const worker = new Worker('./dist/worker.bundle.js');

打包后的脚本已经把所有依赖合并，没有import语句，完全兼容不支持模块类型的Worker环境。如果用Rollup，可以用@rollup/plugin-worker插件，配置更简洁，同样能生成独立的Worker打包文件。

2. 手动将ES6模块转为IIFE格式引入 #

如果不想引入构建工具，可以手动把需要的模块改成立即执行函数表达式（IIFE），把模块导出的内容挂载到Worker的全局对象self上，再用importScripts引入。

比如原来的ES6模块x.js：

// 原x.js（ES6模块）
export const calculate = (num) => num * 2;
export const message = 'Hello from module';

转换成IIFE格式的x.iife.js：

// x.iife.js
(function() {
  const calculate = (num) => num * 2;
  const message = 'Hello from module';
  // 挂载到Worker全局对象
  self.XUtils = { calculate, message };
})();

然后在Worker脚本里这样用：

// worker.js
importScripts('./x.iife.js');
console.log(self.XUtils.message); // 输出 "Hello from module"
console.log(self.XUtils.calculate(5)); // 输出 10

这个方法适合小型项目或者临时场景，缺点是模块多的话手动转换比较麻烦。

3. 尝试动态import的polyfill（局限性较大） #

如果环境支持Promise，也可以用ES模块的polyfill来模拟动态import。先通过importScripts引入polyfill，再使用动态import：

// worker.js
importScripts('es-module-shims.min.js'); // 需提前下载或引入对应版本
const { calculate } = await import('./x.js');
console.log(calculate(3));

不过这个方法依赖外部polyfill，且对旧环境的兼容性不如前两个方案，只适合临时测试或者环境相对宽松的场景。

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