2016-07-15 39 views
9

Sono nuovo in Webpack e si è verificato un problema in seguito a this tutorial.Errore di caricamento di Webpack Babel - Uncaught Sintassi Errore: importazione di token imprevisto

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.

risposta

20

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.

+0

Grande, grazie per la richiesta help.Followed le istruzioni e ha ottenuto un nuovo errore di 'modulo non trovato: Errore: Impossibile risolvere il modulo 'lodash /collection/sortBy'. Ho controllato la directory di lodash e ho scoperto che non esiste una sottodirectory 'collection'. Così ho cambiato il percorso in' lodash/sortBy 'e poi ha funzionato. È un peccato che il tutorial non grosso pezzo della configurazione di babele. – mikeym

+1

Grazie ancora per aver risolto il problema principale. Ho accettato la tua risposta e aggiornato la mia domanda per includere la correzione per il problema separato. Modulo non trovato: Errore: impossibile risolvere il modulo 'lodash/collection/sortBy'. aiutare chiunque a ottenere quell'errore successivo mentre si segue lo stesso tutorial. – mikeym

+5

il mio problema non è stato risolto * import {Config} da './util/config'; ^^^^^^ SintassiErrore: importazione di token imprevisto * –

1

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

Grazie per il suggerimento. Sono riuscito a farlo funzionare e ho postato i passaggi nella mia risposta sopra.Cheers! – mikeym

+0

il mio problema non risolto * import {Config} da './util/config'; ^^^^^^ SyntaxError: importazione di token imprevisto * –

Problemi correlati