Question

我正在使用ES6 / React / Redux babel和Gulp编写Chrome扩展程序。

我正在使用babel presets es2015，stage-2并做出反应。

然后我意识到，因为我只针对Chrome，所以我可以摆脱es2015 / estage-2阶段，因为Chrome支持它。

所以我尝试的第一个是获取.babelrc并删除对es2015和stage-2的引用。

没那么快......在运行 webpack 之前，gulp脚本无法运行。我首先尝试的只是使gulp文件与ES5兼容。

然后我得到了不支持扩散运算符的错误，所以我重新添加了“stage-2”加载器。

然后我在不同的模块中出错：

> WARNING in ./background/src/index.html Module parse failed:
> /my_path/my_project/src/index.html Unexpected token (1:0) You may need
> an appropriate loader to handle this file type. SyntaxError:
> Unexpected token (1:0)
>     at Parser.pp$4.raise (/my_path/my_project/node_modules/acorn/dist/acorn.js:2221:15)

为了帮助理解我的代码的结构，它位于3个主要文件夹中：背景，内容和弹出广告。每个代表Chrome环境。对于每一个，我有一个单独的webpack.config.js文件，类似于这个：https://pastebin.com/hseVyQaw 然后Gulp为每个配置文件调用webpack，并在构建过程中为每个配置文件生成包输出文件。

有一种方法可以让Gulp / Webpack使用ES6语法，而不是为部署进行转换吗？这个问题的最佳方法是什么？

Gulp版

> [17:32:27] Requiring external module babel-register 
> [17:32:27]CLI version 3.9.1 
> [17:32:27] Local version 3.9.1

Webpack版本：1.14.0

更新按照@Michael Jungo的建议添加html-loader之后，它看起来运行正常，但是它给了我一个警告，不确定忽略它有多糟糕：

WARNING in ./background/src/index.js
Critical dependencies:
17:29-52 the request of a dependency is an expression
 @ ./background/src/index.js 17:29-52

更新2 哦，Chrome正在抱怨我的扩展程序的模块语法，但根据我读到的内容，我认为它是支持的：

Uncaught SyntaxError: Unexpected token import

Answer 1

您的错误与babel或任何ES6功能无关。您尝试导入HTML文件./background/src/index.html，但在您发布的配置中，.html没有可以处理这些文件的规则，因此webpack会告诉您可能需要一个适合此文件类型的加载器。

您可以使用html-loader并将以下规则添加到loaders数组中：

{
  test: /\.html$/,
  loader: 'html-loader'
}

至于你的babel配置，它应该按你想要的那样工作。请记住，如果您正在使用ES模块（import/export），您仍然需要将其转换为开头或切换到支持开箱即用的webpack 2。此外，UglifyJs并不了解ES6语法，如果您想要升级ES6，则必须使用babili之类的替代babili-webpack-plugin。

透明反应代码，但保留ES6

1 个答案: