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

时间:2016-07-15 21:53:43

标签: javascript webpack babeljs

我是Webpack新手并遇到this tutorial之后的问题。

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

bundle.js:49 Uncaught SyntaxError: Unexpected token import

指的是import sortBy from 'lodash/collection/sortBy';的{​​{1}}行。所以我认为它是一个babel转换问题(不允许ES6的index.js语法?)

以下是完整的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

我已经搜索了与问题相关的其他问题herehere以及Google搜索但未找到解决方案或原因我为#&# 39;我还得错误。也许教程已经过时。如何解决这个问题的任何指导将非常感谢!

更新

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

然而,发生了新的错误 - module.exports = { entry: './src/index.js', output: { path: './public/', filename: 'bundle.js' }, devServer: { contentBase: './public/' }, module: { loaders: [ {test: /\.js$/, exclude: /node_modules/, loader: 'babel'} ] } }

如果您正在使用this tutorial并遇到此错误,则很可能是由Module not found: Error: Cannot resolve module 'lodash/collection/sortBy'中的错误路径引起的,特别是index.js目录似乎已不再存在存在。我设法通过简单地将路径更改为lodash/collections来解决第二个错误。

注意

请务必首先检查lodash/sortBy中是否安装了lodash,并在更改前确定路径是否正确。

2 个答案:

答案 0 :(得分:21)

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

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

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

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

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

  

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

进行安装
$ npm install babel-preset-es2015 --save-dev

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

  

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

     

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

{
  "presets": ["es2015"]
}

Babel Setup页面中的详细信息。

答案 1 :(得分: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' }
        ]
    }
}