Ошибка загрузки Webpack Babel-Uncaught SyntaxError: неожиданный импорт токенов [дубликат]

этот вопрос уже есть ответ здесь:

я новичок в Webpack и столкнулся с проблемой, следующей в этом уроке.

кажется webpack.конфиг.js не настраивает babel-loader правильно, но я не уверен.В в консоли я вижу следующую ошибку:

bundle.js:49 Uncaught SyntaxError: Unexpected token import

что относится к строке import sortBy from 'lodash/collection/sortBy'; моего index.js. Поэтому я предполагаю, что это проблема транспилирования Вавилона (не позволяя import синтаксис ЕС6?)

здесь 

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);
    });

и webpack.config.js выглядит так:

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

я искал другие вопросы, которые выглядели так, как будто они относятся к проблеме здесь и здесь а также googling вокруг, но не нашел решения или причины, почему я получаю ошибку еще. Возможно, учебник устарел.Любые рекомендации, как исправить эту проблему, будут очень признательны!

обновление

конкретные ошибки загрузки Бабель был решен, следуя шагам, описанным в ответ написал ниже Александр Thebaldi.

однако произошла новая ошибка - Module not found: Error: Cannot resolve module 'lodash/collection/sortBy'

если вы работаете через этот учебник и столкнуться с этой ошибкой, это, скорее всего, вызвано неправильным путем в index.js,в частности, тот факт, что кажется, больше не существует. Мне удалось решить эту вторую ошибку, просто изменив путь на lodash/sortBy.

Примечание

обязательно сначала проверьте это lodash установлен в node_modules и путь является правильным вручную, прежде чем изменить его.

9
babeljs javascript webpack

2 ответов

во-первых, убедитесь, что вы установили babel core и loader с помощью:

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

таким образом, правильный загрузчик babel-loader, а не babel. Конфигурация должна быть:

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

На самом деле вам нужно сказать babel, чтобы преобразовать ваш код.

Pre-6.x, Babel включил определенные преобразования по умолчанию. Однако, Бабель 6.x не поставляется с включенными преобразованиями. Вам нужно явно сказать ему, что преобразования для запуска. Самый простой способ сделать это-использовать предустановку, такую как предустановка ES2015. Вы можете установить его.

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

после установки предустановки вы должны включить его.

создать .babelrc config в корне проекта и включить некоторые плагины.

предполагая, что вы установили предустановку ES2015, чтобы включить ее вы должны определить его в , как это:

{
  "presets": ["es2015"]
}

детали Настройка Babel страница.

20

Mikeym

это проблема с загрузчиком babel и ES6.

вы можете изменить свой webpack.конфиг.js к этому:

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