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

只是强调，你可能知道：你的错误

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

尽管它的名字，ES6不会在没有确定的一些事情的情况下工作。

确定的事项：

1）you don't need any webpack.config.babel.js，当您的项目中有webpack.config.js时。

2）确保在webpack.config.babel.js中，您在Webpack版本3或更高版本上（1）保持真实

3）确保您的package.json至少包含.babelrc或env

es2015

4）确保安装了以下两个

{ "presets": ["env"] }

分别npm install babel-cli --save-dev npm install babel-preset-env --save-dev取决于您的babel-preset-es2015。（read here为什么.babelrc可能有点冷却。）

Answer 3

如果您正在使用Web {名单}中的import，请确保使用此babel插件：https://www.npmjs.com/package/babel-plugin-syntax-dynamic-import

使用`{modules：false}`时``webpack.config.babel.js`中的'意外的令牌导入'

3 个答案:

确定的事项：