`Неожиданный импорт токена` в `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.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?


webpack javascript babeljs ecmascript-6 webpack-2
person d4nyll    schedule 22.01.2017    source источник

Ответы (4)


arrow_upward
19
arrow_downward

Следующее сработало для меня.

Установите .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"]
          }
        }
      ]
    }
  ]
},
person d4nyll    schedule 22.01.2017
comment
Настройки в конфигурации вашего веб-пакета будут переопределены вашим файлом .babelrc, если вы не установите babelrc: false - person yujingz; 24.04.2017
comment
@yujingz Кажется, это не так, я просто заработал на 100% без этого. - person Andrew Li; 04.07.2017
comment
Вы получите ту же ошибку, если запустите webpack --config ./webpack.config.babel, чтобы исправить это, запустите webpack --config ./webpack.config.babel.js. Вам нужно добавить «js» в файл конфигурации. - person Anenth; 19.08.2017
comment
@d4nyll пресет env рекомендуется Babel по сравнению со всеми остальными - person griest; 14.11.2017

arrow_upward
11
arrow_downward

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

`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, возможно, немного кулер.)

person Frank Nocke    schedule 21.09.2017
comment
истинный. Исправлено. - person Frank Nocke; 31.01.2018

arrow_upward
1
arrow_downward

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

person publicJorn    schedule 25.10.2017

arrow_upward
-1
arrow_downward

Вы создали файл webpack.config.js, и при выполнении webpack вы получаете сообщение об ошибке выше. Потому что ваш файл конфигурации webpack должен быть babelified, прежде чем вы сможете его использовать,

1) Переименуйте webpack.config.js в webpack.config.babel.js.

2) Теперь создайте новый файл webpack.config.js со следующими двумя строками.

require('babel-register');
module.exports = require('./webpack.config.babel.js');

3) создайте файл .babelrc параллельно вашему файлу webpack.config.js со следующим содержимым. Нам нужно явно указать Babel, какой пресет использовать.

{
  "presets": ["latest",'react', 'es2015','stage-2']
}

4) добавьте следующие модули узла в свою зависимость (требуется для пресетов, используемых в .babelrc)

npm install babel-preset-env babel-preset-es2015 babel-preset-stage-2 babel-preset-latest babel-preset-react --save-dev

5) Вы закончили. Теперь, если вы выполните webpack --progress --colors --watch, это должно сработать.

person sapy    schedule 12.08.2017
comment
объявление 2) Никакой webpack.config.js не нужен (даже как заглушка), если рядом есть webpack.babel.config.js. [См. здесь[(stackoverflow.com/questions/46239512/) .babelrc действительно требуется (если вы хотите поместить ES6 в этот файл, что и является основной причиной этого...). - person Frank Nocke; 21.09.2017