Webpack Babel加载错误 - 未捕获的SyntaxError:意外的令牌导入

Question

我是Webpack的新手并且在本教程之后遇到了问题.

看来webpack.config.js没有设置babel-loader正确,但我不sure.In我看到下面的错误控制台:

bundle.js:49 Uncaught SyntaxError: Unexpected token import

哪个指的import sortBy from 'lodash/collection/sortBy';是我的行index.js.所以我认为这是一个babel转换问题(不允许importES6 的语法？)

这是完整的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);
    });

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

我已经搜索了其他问题,这些问题看起来与这里和这里的问题有关,还有谷歌搜索,但还没有找到解决方案或原因我还没有得到错误.也许教程已经过时.如何解决这个问题的任何指导将非常感谢!

UPDATE

按照Alexandre Thebaldi在下面发布的答案中列出的步骤解决了特定的babel加载错误.

但是,发生了新的错误 - Module not found: Error: Cannot resolve module 'lodash/collection/sortBy'

如果您正在完成本教程并遇到此错误,则很可能是由于路径不正确导致的index.js,特别是lodash/collections目录似乎不再存在.我设法通过简单地改变路径来解决第二个错误lodash/sortBy.

注意

在更改之前,请务必先检查lodash是否已安装node_modules并且路径是否正确.

Answer 1

首先,确保您使用以下方法安装了babel核心和装载程序:

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

所以,正确的加载程序babel-loader,而不是babel.配置应该是:

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

实际上你需要告诉babel转换你的代码.

在6.x之前,Babel默认启用了某些转换.但是,Babel 6.x不附带任何启用的转换.您需要明确告诉它要运行什么转换.最简单的方法是使用预设,例如ES2015预设.你可以安装它.

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

预设安装后,您必须启用它.

.babelrc在项目根目录中创建配置并启用一些插件.

假设您已经安装了ES2015 Preset,为了启用它,您必须在.babelrc文件中定义它,如下所示:

{
  "presets": ["es2015"]
}

Babel设置页面中的详细信息.