Errore di caricamento di Webpack Babel - Uncaught Sintassi Errore: importazione di token imprevisto

Question

Sono nuovo in Webpack e si è verificato un problema in seguito a this tutorial.

sembra che il webpack.config.js non è la creazione di babel-loader correttamente, ma non sto sure.In console vedo il seguente errore:

bundle.js:49 Uncaught SyntaxError: Unexpected token import 

che si riferisce alla linea import sortBy from 'lodash/collection/sortBy'; della mia index.js. Quindi presumo che sia un problema babele transpiling (non permettendo la import sintassi del ES6?)

Ecco il file 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); 
    }); 

E webpack.config.js assomiglia a questo:

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

I' Ho cercato attraverso altre domande che sembravano correlate al problema here e here e su Google in giro, ma non ho trovato una soluzione o una ragione per cui mi sto gettando ancora l'errore. Forse il tutorial non è aggiornato. Qualche consiglio su come risolvere questo problema sarebbe molto apprezzato!

UPDATE

L'errore babele di carico specifico è stato risolto seguendo la procedura descritta nella risposta postato qui sotto da Alexandre Thebaldi.

Tuttavia, si è verificato un nuovo errore - Module not found: Error: Cannot resolve module 'lodash/collection/sortBy'

Se si sta lavorando attraverso this tutorial e verifica questo errore, è probabilmente causato da un percorso non corretto nel index.js, in particolare il fatto che la directory lodash/collections sembra Non esiste più. Sono riuscito a risolvere questo secondo errore semplicemente cambiando il percorso a lodash/sortBy.

NOTA

Assicuratevi di controllare prima che lodash è installato nella node_modules e il percorso sia corretto manualmente prima di cambiarlo.

Answer 1

prima cosa, assicurarsi di aver installato nucleo babel e caricatore utilizzando:

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

Così il caricatore corretto è babel-loader e non babel. La configurazione dovrebbe essere:

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

---

In realtà bisogna dire a babel per trasformare il vostro codice.

Pre-6.x, Babel enabled certain transformations by default. However, Babel 6.x does not ship with any transformations enabled. You need to explicitly tell it what transformations to run. The simplest way to do this is by using a preset, such as the ES2015 Preset. You can install it with.

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

Dopo preimpostato installato è necessario attivarlo.

Create a .babelrc config in your project root and enable some plugins.

Assuming you have installed the ES2015 Preset, in order to enable it you have to define it in your .babelrc file, like this:

{ 
    "presets": ["es2015"] 
} 

dettagli in Babel Setup pagina.

Answer 2

Mikeym

Questo è un problema con il babel-caricatore e ES6.

Potete cambiare le webpack.config.js a questo:

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' } 
     ] 
    } 
}