Как настроить Babel для webpack2 с optional: runtime

437
18 апреля 2017, 09:20

Никак не могу настроить конвертер Babel для webpack2-проекта. Я бы хотел, чтобы webpack добавлял функционал babel в отдельный модуль (в первой версии webpack это прекрасно работало с настройкой optional: 'runtime' в webpack.config.js), но пока и без этой возможности не получается.

Структура проекта Исходники js-файлов в development/js, выходной js - пока в development.

package.json (показываю, какие пакеты устанавливал)

{
    "name": "Webpack2BabelTest",
    "version": "1.0.0",
    "dependencies": {
        "babel-loader": "^6.4.1"
    },
    "devDependencies": {
        "webpack": "^2.3.3"
    }
}

webpack.config.js

'use strict';
const NODE_ENV = process.env.NODE_ENV || 'development';
module.exports = {
    context: __dirname + '/development',
    entry: './js/main.js',
    output: {
        path: __dirname + '/development/',
        filename: 'index.js'
    },
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader?presets[]=es2015',
            optional: 'runtime'
        }]
    },
    watch: NODE_ENV === 'development'
};

Ошибка:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module.loaders[0] has an unknown property 'optional'. These properties are valid:
   object { enforce?, exclude?, include?, issuer?, loader?, loaders?, oneOf?, options?, parser?, query?, resource?, resourceQuery?, compiler?, rules?, test?, use? }

Ошибка без настройки optional: 'runtime' :

Module build failed: Error: Cannot find module 'babel-core'

Обновление

Попробовал решение на основе ответа YozhEzhi . Я убрал всё, что связано с react, поскольку не использую данный движок. Всё отработало без ошибок, но let в var не преобразовалось, значит конвертация не была выполнена.

package.json

  "dependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "6.22.0"
  },
  "devDependencies": {
    "webpack": "^2.3.3"
  }

webpack.config

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

Babel хочет знать - какие пресеты ему использовать.

Пример package.json:

{
  "name": "cool-app",
  "version": "1.0.0",
  "babel": {
    "presets": [
      "es2015",
      "react"
    ]
  },
  "dependencies": {
    "react": "15.4.2",
    "react-dom": "15.4.2"
  },
  "devDependencies": {
    "babel-core": "6.22.0",
    "babel-loader": "6.2.10",
    "babel-preset-es2015": "6.22.0",
    "babel-preset-react": "6.22.0",
    "react-hot-loader": "1.3.1",
    "webpack": "2.2.1",
    "webpack-dev-server": "2.3.0"
  }
}

В webpack.config.js:

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

Полёт нормальный без optional: 'runtime'.

READ ALSO
Использование jQuery на сервере и на локалке

Использование jQuery на сервере и на локалке

Не совсем понимаю в подключении jQuery, сейчас последняя версия 32

277
Нужно перезагрузить скрипт на странице

Нужно перезагрузить скрипт на странице

Доброго времени суток, столкнулся с такой проблемойЕсть блок добавления товара, где выбор категории фотографии работают через скрипт (input

307