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

Question

我有一个使用 Webpack 作为模块打包器的 React 项目，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?

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

Answer 2

您已经创建了一个 webpack.config.js 并且在绑定执行 webpack 时出现上述错误。因为你的 webpack 配置文件需要 babelified 才能使用它，

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 它应该可以工作。

Answer 3

只是强调一下，您可能知道：您的错误

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

与您正在构建的东西没有任何关系，仅与您的webpack.config.babel.js有关。尽管它的名字，ES6 在没有确定一些事情的情况下是不会工作的。

需要确认的事项：

1) webpack.config.js，当你的项目中有 webpack.config.babel.js。

2) 确保在您的 package.json 中，您使用的是 Webpack 版本 3 或更高版本，以便 (1) 成立

3) 确保你的 .babelrc 至少包含 env 或 es2015

{ "presets": ["env"] }

4) 确保安装了以下两个

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

分别babel-preset-es2015取决于你的.babelrc。（read here 为什么 env 可以说更酷一些。）

Answer 4

如果您使用的是内置 import 的 Webpack 2.6+，请确保使用此 babel 插件：https://www.npmjs.com/package/babel-plugin-syntax-dynamic-import

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

`Unexpected token import` in `webpack.config.babel.js` when using `{modules: false}`

javascript

ecmascript-6

webpack

babeljs

webpack-2

需要确认的事项：