web-dev-qa-db-ja.com

「{modules：false}」を使用している場合、「webpack.config.babel.js」の「予期しないトークンのインポート」

モジュールバンドルとしてWebpackを使用するReactプロジェクトと、次の設定を使用してbabel-loaderをES5に変換するプロジェクトがあります。

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

オプションは、スタンドアロン.babelrcファイルで設定されます。

Babel 6.13. は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を認識させるにはどうすればよいですか？

javascriptwebpackecmascript-6babeljswebpack-2
21
d4nyll

次は私のために働いた。

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

おそらく知っているように、強調するために：あなたのエラー

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

持っているnothingは、あなたのwebpack.config.babel.jsだけで、あなたが構築しているものとは関係ありません。その名前にもかかわらず、ES6はいくつかのことを確認しないと機能しません。

確認すること：

1） 必要ありませんwebpack.config.js、プロジェクトにwebpack.config.babel.jsがある場合。

2）package.jsonで、（1）が成り立つためにWebpackバージョン3以降を使用していることを確認してください

3）少なくともenvまたは.babelrcを含むes2015があることを確認してください

{ "presets": ["env"] }

4）次の2つがインストールされていることを確認してください

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

babel-preset-es2015に応じてそれぞれ.babelrc。 （ こちらをご覧くださいenvが間違いなく少し涼しい理由。）

9
Frank Nocke

importが焼き付けられているWebpack 2.6+を使用している場合、このbabelプラグインを使用していることを確認してください： https://www.npmjs.com/package/babel-plugin-syntax-dynamic-インポート

1
publicJorn