当使用 `{modules: false}` 时，在 `webpack.config.babel.js` 中出现了 `Unexpected token import`。

Question

我有一个React项目，使用Webpack作为模块打包工具，并使用babel-loader将其转换为ES5，以下是设置内容：

module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: [
        {
          loader: "babel-loader"
        }
      ]
    }
  ]
},

选项在独立的.babelrc文件中设置。

Babel 6.13.0支持ECMAScript模块，这意味着ECMAScript模块不需要先转换为CommonJS模块。为了获取此行为，文档建议我们在.babelrc中使用此设置。

{
  presets: [["es2015", { "modules": false }], "react"]
}

然而，当我尝试使用此设置运行Webpack时，它会返回错误：

$ ./node_modules/.bin/webpack
/home/d4nyll/foo/bar/webpack.config.babel.js:1
(function (exports, require, module, __filename, __dirname) { import webpack from 'webpack';
                                                              ^^^^^^
SyntaxError: Unexpected token import

我猜测这是因为babel-loader不会处理webpack.config.babel.js，所以它无法识别import关键字。当移除{"modules": false}时，错误就不再出现了，但我需要这个功能。我该如何让Babel识别webpack.config.babel.js？

- d4nyll

Answer 1

以下方法适用于我。

将.babelrc设置为以下内容：

{
  "presets": ["es2015"]
}

.babelrc的设置将应用于webpack.config.babel.js文件。

接下来，更改Webpack配置以包括您想要应用于应用程序代码的选项。

module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: [
        {
          loader: "babel-loader",
          options: {
            "presets": [["es2015", {"modules": false}], "react"]
          }
        }
      ]
    }
  ]
},

- d4nyll

---

除非您设置babelrc: false，否则您的webpack配置中的设置将被您的.babelrc文件覆盖。 - yujingz

@yujingz，似乎不是这样的，我刚刚成功地完成了这个任务，而没有用到那个。 - Andrew Li

如果你运行 webpack --config ./webpack.config.babel，你会得到相同的错误，要修复它，请运行 webpack --config ./webpack.config.babel.js。你需要在配置文件中添加 'js'。 - Anenth

@d4nyll Babel推荐使用env预设，它比其他所有预设都更好。 - griest

Answer 2

强调一下，正如你可能知道的那样：您的错误

`Unexpected token import` in `webpack.config.babel.js`...

与您正在构建的项目无关，仅与您的 webpack.config.babel.js 有关。尽管它被称为 ES6，但在确保一些东西的情况下，它并不能正常工作。

需要确保的事项：

1）当您在项目中拥有 webpack.config.babel.js 时，您不需要任何webpack.config.js。

2）确保在您的 package.json 中，您使用了 Webpack 版本3或更高版本，以使（1）成立。

3）确保您有一个包含至少env或es2015的.babelrc文件。

{ "presets": ["env"] }

4）确保已安装以下两个软件

npm install babel-cli --save-dev
npm install babel-preset-env --save-dev

根据你的.babelrc分别使用babel-preset-es2015。（点击这里了解为什么env可能更酷。）

- Frank N

---

正确的翻译：真。已修正。 - Frank N

Answer 3

如果您正在使用 Webpack 2.6+，其中 import 已经内置，请确保使用此 Babel 插件：https://www.npmjs.com/package/babel-plugin-syntax-dynamic-import。

- publicJorn

Answer 4

你已经创建了一个webpack.config.js文件，但在执行webpack时出现了上述错误。原因是你的webpack配置文件需要在使用之前进行babelify。

1）将你的webpack.config.js重命名为webpack.config.babel.js。

2）现在创建一个新文件webpack.config.js，只包含以下2行代码。

require('babel-register');
module.exports = require('./webpack.config.babel.js');

3) 在与您的webpack.config.js文件平行的位置创建一个.babelrc文件，并添加以下内容。我们需要明确告诉Babel要使用哪个预设。

{
  "presets": ["latest",'react', 'es2015','stage-2']
}

4) 将以下节点模块添加到您的依赖项中（在.babelrc中使用的预设所需）

npm install babel-preset-env babel-preset-es2015 babel-preset-stage-2 babel-preset-latest babel-preset-react --save-dev

5) 完成了。现在如果你执行 webpack --progress --colors --watch，它应该可以工作。

- sapy

---

ad 2) 如果有一个 webpack.babel.config.js 文件，那么就不需要 webpack.config.js 文件（即使只是一个存根文件）。请参见此处确实需要 .babelrc 文件（如果你想将 ES6 放入该文件中，这也是其存在的原因...）。 - Frank N