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

Posted 2023-02-22

【中文标题】Webpack Babel 加载错误 - Uncaught SyntaxError: Unexpected token import [重复]

【英文标题】：Webpack Babel loading error - Uncaught SyntaxError: Unexpected token import [duplicate]

【发布时间】：2016-11-19 05:15:29

【问题描述】：

我是 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 中，并且在更改之前手动手动检查路径是否正确。

【参考方案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 页面中的详细信息。

【讨论】：

太好了，感谢您的及时帮助。按照说明进行操作，得到一个新错误Module not found: Error: Cannot resolve module 'lodash/collection/sortBy'。我检查了lodash目录，发现没有collection子目录。所以我改变了'lodash/sortBy' 的路径，然后它就起作用了。很遗憾，教程遗漏了 babel 配置的一大块。

再次感谢您解决核心问题。我已接受您的回答并更新了我的问题，以包含针对单独问题 Module not found: Error: Cannot resolve module 'lodash/collection/sortBy' 的修复程序。希望它也能帮助任何人在关注后续错误时得到帮助相同的教程。

我的问题没有解决 *import Config from './util/config'; ^^^^^^ SyntaxError: Unexpected token import *

【参考方案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' 
        ]
    
 

【讨论】：

感谢您的建议。我设法让它工作并在上面的答案中发布了步骤。干杯！

我的问题没有解决 * import Config from './util/config'; ^^^^^^ SyntaxError: Unexpected token import *