Webpack Babel加载错误 - 未捕获的SyntaxError：意外的标记导入

Question

Webpack Babel加载错误 - 未捕获的SyntaxError：意外的标记导入

12

我对Webpack不太了解，按照这个教程进行时遇到了问题。

看起来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'}
        ]
    }
}

我已经查看了其他类似于这里和这里的问题，并在 Google 上搜索，但尚未找到解决方法或造成错误的原因。也许该教程已过时。非常感谢任何有关如何解决此问题的指导！

更新

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

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

如果您正在通过此教程进行工作，并遇到此错误，则最可能是由于index.js中的路径不正确，具体来说是lodash/collections目录似乎不再存在。我通过简单地将路径更改为lodash/sortBy成功解决了第二个错误。

注意

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

- mikeym

2个回答

2

Mikeym

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

- Allan F. Gagnon

感谢您的建议。我已经成功地解决了问题，并在我的答案中发布了步骤。谢谢！ - mikeym

我的问题没有解决 * import { Config } from './util/config'; ^^^^^^ 语法错误：意外的令牌import - KARTHIKEYAN.A

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alexandre Thebaldi · Accepted Answer

首先，确保已经安装了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 不带任何默认已启用的转换。你需要明确地告诉它要运行哪些转换。最简单的方法是使用预设（preset），例如 ES2015 预设。你可以使用下面的命令进行安装：

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

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

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

假设已安装了ES2015预设，则要启用它，您必须在.babelrc文件中定义它，如下所示：

{
  "presets": ["es2015"]
}

Babel Setup页面有详细信息。