javascript - org - webpack babel 7

Error de carga de Webpack Babel-Uncaught SyntaxError: importación de token inesperada

Question

Esta pregunta ya tiene una respuesta aquí:

• El archivo Babel se copia sin ser transformado 5 respuestas

Soy nuevo en Webpack y tengo un problema al seguir este tutorial .

Parece que webpack.config.js no está configurando babel-loader correctamente, pero no estoy seguro. En la consola veo el siguiente error:

bundle.js:49 Uncaught SyntaxError: Unexpected token import

Que se refiere a la línea import sortBy from ''lodash/collection/sortBy''; de mi index.js Entonces, supongo que es un problema de transposición de babel (no permite la sintaxis de import de ES6).

Aquí está el archivo completo index.js

import sortBy from ''lodash/collection/sortBy'';
import {users} from ''./users'';
import {User} from ''./User'';

sortBy(users, ''name'')
    .map(user => {
        return new User(user.name, user.age);
    })
    .forEach(user => {
        console.log(user.display);
    });

Y webpack.config.js ve así:

module.exports = {
    entry: ''./src/index.js'',
    output: {
        path: ''./public/'',        
        filename: ''bundle.js''
    },
    devServer: {
        contentBase: ''./public/''
    },
    module: {
        loaders: [
            {test: //.js$/, exclude: /node_modules/, loader: ''babel''}
        ]
    }
} 

He buscado a través de otras preguntas que parecían que se relacionan con el problema aquí y aquí , así como buscar en Google, pero no he encontrado una solución o razón por la que estoy recibiendo el error todavía. Tal vez el tutorial esté desactualizado. Cualquier guía sobre cómo solucionar este problema sería muy apreciada.

ACTUALIZAR

El error específico de carga de Babel se resolvió siguiendo los pasos descritos en la respuesta publicada a continuación por Alexandre Thebaldi.

Sin embargo, se produjo un nuevo error: Module not found: Error: Cannot resolve module ''lodash/collection/sortBy''

Si está trabajando en este tutorial y encuentra este error, lo más probable es que esté causado por una ruta incorrecta en index.js , específicamente por el hecho de que el directorio lodash/collections parece no existir más. lodash/sortBy resolver este segundo error simplemente cambiando la ruta a lodash/sortBy .

NOTA

Asegúrese primero de verificar que lodash esté instalado en node_modules y que la ruta sea correcta manualmente antes de cambiarla.

Answer 1

En primer lugar, asegúrese de haber instalado el núcleo y el cargador Babel utilizando:

$ npm install --save-dev babel-loader babel-core

Entonces, el cargador correcto es babel-loader y no babel . La configuración debe ser:

module: {
  loaders: [
    { test: //.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
}

En realidad, necesitas decirle a babel que transforme tu código.

Antes de 6.x, Babel habilitó ciertas transformaciones por defecto. Sin embargo, Babel 6.x no incluye transformaciones habilitadas. Necesitas decirle explícitamente qué transformaciones ejecutar. La forma más sencilla de hacerlo es mediante el uso de un ajuste preestablecido, como el ajuste preestablecido ES2015. Puedes instalarlo con.

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

Después del preajuste instalado, debes habilitarlo.

Cree una configuración .babelrc en su raíz de proyecto y habilite algunos complementos.

Suponiendo que haya instalado el Preset ES2015, para habilitarlo debe definirlo en su archivo .babelrc , así:

{
  "presets": ["es2015"]
}

Detalles en la página de configuración de Babel .

Answer 2

Mikeym

Este es un problema con babel-loader y ES6.

¿Puedes cambiar tu webpack.config.js a esto?

    module.exports = {
    entry: ''./src/index.js'',
    output: {
        path: ''./public/'',        
        filename: ''bundle.js''
    },
    devServer: {
        contentBase: ''./public/''
    },
    module: {
        loaders: [
            {test: //.js$/, exclude: /node_modules/, loader: ''babel?presets[]=es2015'' }
        ]
    }
}