Webpack Babel 加载错误 - Uncaught SyntaxError: Unexpected token import [重复]

Question

我是 Webpack 的新手，在 this tutorial 之后遇到了问题。

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

bundle.js:49 Uncaught SyntaxError: Unexpected token import

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

这是完整的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'}
        ]
    }
} 

我搜索了其他看起来与问题here 和here 相关的问题，并四处搜索，但还没有找到解决方案或我收到错误的原因。也许本教程已过时。任何如何解决此问题的指导将不胜感激！

更新

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

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

如果您正在通过this tutorial 工作并遇到此错误，则很可能是由index.js 中的路径不正确引起的，特别是lodash/collections 目录似乎不再存在的事实。我设法通过简单地将路径更改为lodash/sortBy 来解决第二个错误。

注意

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

Answer 1

首先，确保你已经安装了 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 转换你的代码。

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

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

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

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

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

{
  "presets": ["es2015"]
}

Babel Setup 页面中的详细信息。

Answer 2

麦克米

这是 babel-loader 和 ES6 的问题。

你能把你的 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' }
        ]
    }
}