javascript - plugin - `Importación de token inesperada ''en` webpack.config.babel.js` cuando se usa `{modules: false}`
return import unexpected token (4)
Tengo un proyecto React que utiliza Webpack como el agrupador de módulos, y babel-loader
para transformarlo en ES5, usando la siguiente configuración:
module: {
rules: [
{
test: //.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: "babel-loader"
}
]
}
]
},
Las opciones se establecen en un archivo .babelrc
independiente.
Babel 6.13.0 admite módulos ECMAScript, lo que significa que los módulos ECMAScript no necesitan transformarse primero en módulos CommonJS. Para obtener este comportamiento, la documentación dice que deberíamos usar esta configuración en nuestro .babelrc
.
{
presets: [["es2015", { "modules": false }], "react"]
}
Sin embargo, cuando intento ejecutar Webpack con esta configuración, aparece el siguiente mensaje de error:
$ ./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
Supongo que esto se debe a que babel-loader
no actúa en webpack.config.babel.js
, por lo que no reconoce la palabra clave de import
. El error no aparece cuando se elimina { "modules": false }
, pero quiero esa funcionalidad. ¿Cómo puedo hacer que Babel reconozca webpack.config.babel.js
?
Ha creado un webpack.config.js y cuando webpack
ejecutar el webpack
, está obteniendo un error anterior. Porque tu archivo de configuración del paquete web debe estar babelified
antes de que puedas usarlo,
1) Cambie el nombre de su webpack.config.js
a webpack.config.babel.js
.
2) Ahora cree un nuevo archivo webpack.config.js
con las siguientes 2 líneas
require(''babel-register'');
module.exports = require(''./webpack.config.babel.js'');
3) cree un archivo .babelrc
en paralelo a su archivo webpack.config.js
con el siguiente contenido. Necesitamos decirle a babel explícitamente qué preajuste usar.
{
"presets": ["latest",''react'', ''es2015'',''stage-2'']
}
4) agregue los siguientes módulos de nodo a su dependencia (Requerido para los ajustes preestablecidos utilizados en .babelrc
)
npm install babel-preset-env babel-preset-es2015 babel-preset-stage-2 babel-preset-latest babel-preset-react --save-dev
5) Usted ha terminado. Ahora, si ejecuta webpack --progress --colors --watch
debería funcionar.
Lo siguiente funcionó para mí.
Establezca .babelrc
en lo siguiente:
{
"presets": ["es2015"]
}
La configuración de .babelrc
se aplicaría al archivo webpack.config.babel.js
.
A continuación, cambie la configuración del paquete web para incluir las opciones que desea aplicar a su código de aplicación.
module: {
rules: [
{
test: //.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: "babel-loader",
options: {
"presets": [["es2015", {"modules": false}], "react"]
}
}
]
}
]
},
Si está utilizando Webpack 2.6+ donde se import
, asegúrese de usar este complemento babel: https://www.npmjs.com/package/babel-plugin-syntax-dynamic-import
Solo para enfatizar, como usted probablemente sepa: Su error.
`Unexpected token import` in `webpack.config.babel.js`...
no tiene nada que ver con lo que está construyendo, únicamente con su webpack.config.babel.js
. A pesar de su nombre, ES6 no va a funcionar sin algunas cosas aseguradas.
Cosas para asegurarse
1) no necesita ningún webpack.config.js
, cuando tiene un webpack.config.babel.js
en su proyecto.
2) asegúrese de que en su package.json
, usted está en la versión 3 o superior de Webpack para que (1) sea verdadero
3) asegúrese de tener un .babelrc
contenga al menos env
o es2015
{ "presets": ["env"] }
4) Asegúrate de tener los dos siguientes instalados
npm install babel-cli --save-dev
npm install babel-preset-env --save-dev
Respectivamente babel-preset-es2015
dependiendo de su .babelrc
. ( lea aquí por qué env
es posiblemente un poco más fresco).