it-roy-ru.com

`Неожиданный импорт токенов` в` webpack.config.babel.js` при использовании `{modules: false}`

У меня есть проект React, который использует Webpack в качестве модуля сборки и 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 }, но я хочу эту функциональность. Как я могу заставить Бабеля распознать webpack.config.babel.js?

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

Просто чтобы подчеркнуть, как вы, наверное, знаете: ваша ошибка 

`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. ( читайте здесь почему env, возможно, немного круче.)

8
Frank Nocke

Если вы используете Webpack 2.6+, где запечен import, убедитесь, что вы используете этот плагин babel: https://www.npmjs.com/package/babel-plugin-syntax-dynamic-import

1
publicJorn