Babel 配置错误导致无法使用 ES Module 的解决方法-JavaScript中文网-JavaScript教程资源分享门户

随着 ES6 的流行，模块化已经成为了 JS 开发的标准。为了支持 ES6 模块化语法，在前端开发中我们通常使用 Babel 对代码进行转换。然而，一些开发者可能会在配置 Babel 时出现错误，导致无法使用 ES6 模块化语法。本文将介绍如何解决这个问题。

问题描述

当我们使用 ES6 模块化语法时，代码如下：

// javascriptcn.com 代码示例
// math.js
export const add = (a, b) => a + b;

export const square = x => x * x;

// index.js
import { add, square } from './math.js';

console.log(add(1, 2)); // 3
console.log(square(3)); // 9

然而，如果我们没有正确配置 Babel 来支持 ES6 模块化语法，我们将会得到一个错误：

Uncaught SyntaxError: Unexpected token {

这个错误表示 Babel 没有正确转换我们的代码，导致浏览器无法理解 ES6 模块化语法。

解决方法

为了解决这个问题，我们需要检查我们的 Babel 配置。通常我们需要按照以下步骤来配置 Babel：

安装 @babel/core、@babel/preset-env 和 babel-loader：

npm install --save-dev @babel/core @babel/preset-env babel-loader

在项目中添加 .babelrc 文件，指定 @babel/preset-env 作为预设：

// javascriptcn.com 代码示例
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false
      }
    ]
  ]
}

注意这里我们将 modules 选项设置为 false，这是为了确保 Babel 不会使用 transform-es2015-modules-commonjs 插件，否则将会破坏我们的 ES6 模块化语法。

在 webpack.config.js 中添加 Babel 的 loader：

// javascriptcn.com 代码示例
// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
}

其中，我们使用了 babel-loader 来处理我们的 JS 代码。

完成以上步骤后，重新运行代码，这个问题就应该解决了。

总结

在前端开发中，使用 ES6 模块化已经成为标准，然而在使用 Babel 将 ES6 代码转换为 ES5 时，我们需要注意配置 Babel，以避免破坏 ES6 模块化语法。在本文中，我们详细介绍了如何正确地配置 Babel 来支持 ES6 模块化语法，并给出了示例代码。希望对大家有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653386fa7d4982a6eb714274