转译 React 代码，但不要理会 ES6

Question

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

我使用的是 babel 预设 es2015，stage-2 和 react。

然后我意识到，由于我只针对 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 语法，如果你想 uglify ES6，你必须使用 babili 和 babili-webpack-plugin 之类的替代方法。