本文介绍了Webpack Babel加载错误 - 未捕获的SyntaxError:意外的令牌导入的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我是Webpack的新手,遇到。

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

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

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

bundle.js:49 Uncaught SyntaxError: Unexpected token import

这是指来自'lodash / collection /的行导入sortBy sortBy'; 我的 index.js 。所以我认为这是一个babel转换问题(不允许ES6的 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 import syntax of ES6?)

这是完整的 index.js file

Here is the complete index.js file

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

我通过其他搜索过与和以及谷歌搜索但没有找到解决方案或原因我为什么得到错误。也许教程已经过时。如何解决这个问题的任何指导将非常感谢!

I've searched through other questions that looked like they relate to the problem here and here as 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!

更新

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

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

然而,发生了新的错误 -
找不到模块:错误:无法解析模块' lodash / collection / sortBy'

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

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

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

注意

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

Be sure to first check that lodash is installed in node_modules and the path is correct manually before changing it.

推荐答案

首先,确保你已经安装了babel核心和装载机使用:

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

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

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

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

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






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


Actually you need to tell babel to transform your code.



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

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

After preset installed you have to enable it.

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

Assuming you have installed the ES2015 Preset, in order to enable it you have to define it in your .babelrc file, like this:



{
  "presets": ["es2015"]
}

页。

这篇关于Webpack Babel加载错误 - 未捕获的SyntaxError:意外的令牌导入的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-16 01:03
查看更多