Javascript Webpack Babel 加载错误 - Uncaught SyntaxError: Unexpected token import

Webpack Babel loading error - Uncaught SyntaxError: Unexpected token import

提问by mikeym

I'm new to Webpack and running into a problem following this tutorial.

我是 Webpack 的新手，在遵循本教程时遇到了问题。

It seems the webpack.config.js isn't setting up babel-loadercorrectly but I'm not sure.In the console I see the following error:

似乎 webpack.config.js 设置不babel-loader正确，但我不确定。在控制台中，我看到以下错误：

bundle.js:49 Uncaught SyntaxError: Unexpected token import

Which refers to the line import sortBy from 'lodash/collection/sortBy';of my index.js. So I assume it's a babel transpiling problem(not allowing the importsyntax of ES6?)

这是指import sortBy from 'lodash/collection/sortBy';我的index.js. 所以我认为这是一个 babel 转译问题（不允许使用importES6的语法？）

Here is the complete index.jsfile

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

And webpack.config.jslooks like this:

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

I've searched through other questions that looked like they relate to the problem hereand hereas well as googling around but haven't found a solution or reason why I'm getting the error yet. Maybe the tutorial is out of date.Any guidance how to fix this issue would be much appreciated!

我已经搜索了其他问题，这些问题看起来与这里和这里的问题有关，并在谷歌上搜索，但还没有找到解决方案或我收到错误的原因。也许教程已经过时了。任何如何解决这个问题的指导将不胜感激！

UPDATE

更新

The specific babel loading error was resolved by following the steps outlined in answer posted below by Alexandre Thebaldi.

通过按照 Alexandre Thebaldi 在下面发布的答案中概述的步骤解决了特定的 babel 加载错误。

However, a new error occurred - Module not found: Error: Cannot resolve module 'lodash/collection/sortBy'

然而，出现了一个新的错误—— Module not found: Error: Cannot resolve module 'lodash/collection/sortBy'

If you are working through this tutorialand encounter this error, it is most likely caused by an incorrect path in the index.js,specifically the fact that the lodash/collectionsdirectory seems to no longer exist. I managed to resolve this second error by simply changing the path to lodash/sortBy.

如果您是通过工作本教程和遇到这个错误，它很有可能是在一个不正确的路径造成的index.js，特别是，事实lodash/collections目录似乎不复存在。我通过简单地将路径更改为lodash/sortBy.

NOTE

笔记

Be sure to first check that lodashis installed in node_modulesand the path is correct manually before changing it.

在更改之前，请务必先手动检查lodash已安装node_modules且路径是否正确。

回答by Alexandre Thebaldi

First, make sure that you have installed babel core and loader by using:

首先，确保你已经安装了 babel core 和 loader：

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

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

So the correct loader is babel-loaderand not babel. The config should be:

所以正确的加载器是babel-loader而不是babel。配置应该是：

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

---

---

Actually you need to tell babel to transform your code.

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

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.

在 6.x 之前，Babel 默认启用某些转换。但是，Babel 6.x 没有启用任何转换。您需要明确告诉它要运行哪些转换。最简单的方法是使用预设，例如 ES2015 预设。你可以安装它。

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

After preset installed you have to enable it.

安装预设后，您必须启用它。

Create a .babelrcconfig 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 .babelrcfile, like this:

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

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

{
  "presets": ["es2015"]
}

Details in Babel Setuppage.

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

回答by Allan F. Gagnon

Mikeym

米凯姆

This is an issue with the babel-loader and ES6.

这是 babel-loader 和 ES6 的问题。

Can you change your webpack.config.js to this:

你能不能把你的 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?presets[]=es2015' }
        ]
    }
}