web-dev-qa-db-ger.com

`Unerwarteter Token-Import` in` webpack.config.babel.js`, wenn `{modules: false}` verwendet wird

Ich habe ein React-Projekt, das Webpack als Modulbündler verwendet, und babel-loader, um es mit folgenden Einstellungen in ES5 zu transformieren:

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

Die Optionen werden in einer eigenständigen .babelrc-Datei festgelegt.

Babel 6.13.0 unterstützt ECMAScript-Module, was bedeutet, dass ECMAScript-Module nicht zuerst in CommonJS-Module umgewandelt werden müssen. Um dieses Verhalten zu erhalten, heißt es in der Dokumentation, dass wir diese Einstellung in unserem .babelrc verwenden sollten.

{
  presets: [["es2015", { "modules": false }], "react"]
}

Wenn ich jedoch versuche, Webpack mit dieser Einstellung auszuführen, wird der Fehler zurückgegeben:

$ ./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

Ich vermute, das liegt daran, dass babel-loader nicht auf webpack.config.babel.js reagiert und das Schlüsselwort import nicht erkannt wird. Der Fehler wird nicht angezeigt, wenn { "modules": false } entfernt wird, aber ich möchte diese Funktionalität. Wie kann ich Babel dazu bringen, webpack.config.babel.js zu erkennen?

javascriptwebpackecmascript-6babeljswebpack-2
18
d4nyll

Folgendes hat für mich gearbeitet.

Setzen Sie .babelrc auf Folgendes:

{
  "presets": ["es2015"]
}

Die .babelrc-Einstellungen würden für die webpack.config.babel.js-Datei gelten.

Ändern Sie als Nächstes die Webpack-Konfiguration, um die Optionen aufzunehmen, die auf Ihren Anwendungscode angewendet werden sollen.

module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: [
        {
          loader: "babel-loader",
          options: {
            "presets": [["es2015", {"modules": false}], "react"]
          }
        }
      ]
    }
  ]
},
14
d4nyll

Um nur zu betonen, wie Sie wahrscheinlich wissen: Ihren Fehler 

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

hat nichts mit dem zu tun, was Sie bauen, nur mit Ihrem webpack.config.babel.js. Trotz seines Namens wird ES6 nicht funktionieren, ohne dass ein paar Dinge sicher gestellt werden.

Dinge, die Sie sicherstellen sollten:

1) Sie benötigen keinenwebpack.config.js, wenn Sie einen webpack.config.babel.js in Ihrem Projekt haben.

2) Stellen Sie sicher, dass Sie in Ihrem package.json Webpack Version 3 oder höher verwenden, damit (1) wahr ist

3) Stellen Sie sicher, dass Sie einen .babelrc haben, der mindestens env oder es2015 enthält.

{ "presets": ["env"] }

4) Stellen Sie sicher, dass die folgenden zwei installiert sind

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

Jeweils babel-preset-es2015 abhängig von Ihrem .babelrc. ( hier lesen warum env wohl etwas kühler ist.)

8
Frank Nocke

Wenn Sie Webpack 2.6 oder höher verwenden, in dem import eingebacken ist, stellen Sie sicher, dass Sie dieses babel-Plugin verwenden: https://www.npmjs.com/package/babel-plugin-syntax-dynamic-import

1
publicJorn