Никак не могу настроить конвертер 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']
}
]
},
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'.
Современные инструменты для криптотрейдинга: как технологии помогают принимать решения
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости