Webpack Babel 加载错误 - Uncaught SyntaxError: Unexpected token import [英] Webpack Babel loading error - Uncaught SyntaxError: Unexpected token import

问题描述

我是 Webpack 的新手，在 this 之后遇到了一个问题教程.

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

指的是我的 index.js 的 import sortBy from 'lodash/collection/sortBy'; 行.所以我认为这是一个 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文件

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!

更新

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

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.

注意

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

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

推荐答案

首先，确保你已经安装了 babel core 和 loader，使用:

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.

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

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.

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

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

After preset installed you have to enable it.

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

Create a .babelrc config in your project root and enable some plugins.

假设你已经安装了 ES2015 Preset，为了启用它你必须在你的 .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"]
}

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

这篇关于Webpack Babel 加载错误 - Uncaught SyntaxError: Unexpected token import的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！