如何使用webpack babel-loader和es6与worker-loader？

Question

我将尝试在 Web Worker 代码中使用 babel 来支持 ES6 导入，为此我需要使用 worker-loader。

以下是我在 webpack.config.js 中的设置：

   {
     test: /\.worker\.js$/,
     loader: "worker!babel",
     presets: ['es2015']
   }

这个设置会为worker生成一个带哈希名字的独立bundle文件，例如d46f60b8e184bf8b1cb8.worker.js

然而这个文件没有经过Babel转换成es5。所以它包含了原始的es6导入语句和语法，在浏览器中运行时会报错。长这样：

/* 0 */
/***/ function(module, exports) {

    import _ from 'lodash';

    var o = {foo: 'foo'};

    _.has(o, 'foo'); // true

    setInterval(() => {
       postMessage({tick: Date.now()});
    }, 1000);


/***/ }
/******/ ]);

我尝试过调换加载程序的顺序，例如：

   {
     test: /\.worker\.js$/,
     loader: "babel!worker",
     presets: ['es2015']
   }

并且尝试将其移动到preLoaders和postLoaders，但没有成功。

- kevzettler

Answer 1

我遇到了同样的问题，并通过在选项下提到的查询字符串参数here来解决：

所以：

{
    test: /\.worker\.js$/,
    loader: "worker!babel?presets[]=es2015"
}

- Jon F.