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

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 }删除时不会出现错误,但我想要该功能.我怎样才能让巴贝尔认出来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`...

有没有跟你正在建设,只与你的东西webpack.config.babel.js.尽管它的名字,ES6不会在没有确定的一些事情的情况下工作.

事情要确定:

1)当你有一个项目时,你不需要任何 .webpack.config.jswebpack.config.babel.js

2)确保在你的package.jsonWebpack版本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.(在这里阅读为什么env可以说有点凉爽.)