javascript - es6 - webpack module rules babel loader

Webpack con babel-loader no reconoce la palabra clave import

Question

Tengo este webpack.config.js :

module.exports = {
entry: ''./src/admin/client/index.jsx'',
output: {
filename: ''./src/admin/client/static/js/app.js''
},
loaders: [
{
test: //.jsx?$/,
loader: ''babel'',
exclude: /node_modules/,
query: {
optional: [''runtime'']
}
}
],
resolve: {
extensions: ['''', ''.js'', ''.jsx'']
}
};

... aún así sigo teniendo este error:

$ webpack -v Hash: 2a9a40224beb025cb433 Version: webpack 1.10.5 Time: 44ms [0] ./src/admin/client/index.jsx 0 bytes [built] [failed] ERROR in ./src/admin/client/index.jsx Module parse failed: /project/src/admin/client/index.jsx Line 1: Unexpected reserved word You may need an appropriate loader to handle this file type. | import React from ''react''; | import AdminInterface from ''./components/AdminInterface'';

Yo tengo:

• webpack instalado a webpack mundial y local
• babel-loader , babel-core y babel-runtime instalados
• babel-loader instalado babel-loader todo el mundo, por si acaso

¿Por qué demonios el paquete web aparentemente ignora babel-loader ? ¿O babel-loader no funciona con módulos?

Actualización :

Parece que babel maneja bien el archivo de entrada. Cuando corro:

./node_modules/babel/bin/babel.js ./src/admin/client/index.jsx

... produce ES5 como se esperaba Por lo tanto, me parece que de alguna manera el webpack no está cargando babel-loader correctamente.

Answer 1

¿Cuál es la versión de su babel? Si la versión de Babel es de hasta 6 +, debe identificar el preset ''es2015'' y ''reaccionar'' de esta manera

module: {
loaders: [
{
test: //.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: ''babel'', // ''babel-loader'' is also a legal name to reference
query: {
presets: [''react'', ''es2015'']
}
}
]
}

No olvides instalar estos módulos:

npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev

Answer 2

Esto parece un caso de error del operador. Mi estructura webpack.config.js no era correcta. Específicamente, necesitaba poner los detalles del cargador dentro de una sección de module :

module.exports = {
entry: ''./src/admin/client/index.jsx'',
output: {
filename: ''./src/admin/client/static/js/app.js''
},
module: {
loaders: [
{
test: //.jsx?$/,
loader: ''babel'',
exclude: /node_modules/,
query: {
optional: [''runtime'']
}
}
],
resolve: {
extensions: ['''', ''.js'', ''.jsx'']
}
}
};

Answer 3

Resolví el mismo problema al incluir el es2015 y reaccionar preestablecidos y luego agregarlos al archivo webpack.config.js.

npm install --save-dev babel-preset-es2015 npm install --save-dev babel-preset-react

como se explica en esta publicación: https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html

mi archivo webpack.config.js completo:

module.exports = {
context: __dirname + "/src",
entry: ''./main'',
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
module: {
loaders: [
{
test: //.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: [''es2015'', ''react'']
}
}
],
resolve: {
extensions: [''.js'', ''.jsx'']
}
}
};