javascript - 使用 `Unexpected token import` 时，`webpack.config.babel.js` 中的 `{modules: false}`

Question

我有一个 React 项目，它使用 Webpack 作为模块 bundler ，并使用 babel-loader 将其转换为 ES5，使用以下设置:

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

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

通天塔 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？

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"]
          }
        }
      ]
    }
  ]
},