javascript - plugin - `Importación de token inesperada ''en` webpack.config.babel.js` cuando se usa `{modules: false}`

return import unexpected token

Question

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 ?

Answer 1

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.

Answer 2

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"]
}
}
]
}
]
},

Answer 3

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

Answer 4

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).