使用 Babel 编译 ES6 代码时报错，TypeError: undefined is not a function

前言

在前端开发中，使用 ES6 的新特性可以使代码更加简洁易读、易维护，但是由于目前大多数浏览器不支持 ES6，我们需要使用 Babel 将 ES6 代码转为 ES5 代码。然而，使用 Babel 编译 ES6 代码时我们可能会遇到各种问题，如今天我们要讲的问题：TypeError: undefined is not a function。

错误原因

如果你在使用 Babel 编译 ES6 代码时遇到 TypeError: undefined is not a function 错误，那么很有可能是由于 Babel 编译时没有按照正确的顺序编译导致的。

具体来说，当编译一个模块时，每个模块的依赖关系必须被明确指定，这样 Babel 才能按照正确的顺序编译每一个模块。否则，就会出现 undefined is not a function 的错误。

解决方法

方法1：配置 Babel Plugins

首先，我们需要将 Babel 配置为可以解析依赖关系，我们需要用到 plugin-transform-modules-commonjs 这个插件。

具体的配置可以参照以下示例：

module.exports = {
  presets: [
    '@babel/preset-env',
  ],
  plugins: [
    '@babel/plugin-transform-modules-commonjs',
  ],
};

方法2：手动调整代码顺序

如果配置插件无法解决这个问题，那么我们可以通过手动调整代码顺序来解决问题。

具体来说，我们可以将编译时抛出错误的部分代码单独抽离出来，手动将其放置在正确的位置，这样也可以解决 TypeError: undefined is not a function 的错误。

以下是一个示例代码，帮助你更好地理解如何手动调整代码顺序：

import { sumArray } from './sumArray';

const a = [1, 2, 3, 4, 5];
const b = [6, 7, 8, 9, 10];

const sum = sumArray(a, b);
console.log(sum);

export { sum };

在这个示例代码中，我们调用了一个名为 sumArray 的函数，该函数定义在 sumArray.js 文件中，我们可以将其单独抽离出来：

export function sumArray(a, b) {
  let sum = 0;
  for (let i = 0; i < a.length; i++) {
    sum += a[i] + b[i];
  }
  return sum;
}

然后，我们手动修改原始代码，将 sumArray.js 中的代码放置在主文件之前：

export function sumArray(a, b) {
  let sum = 0;
  for (let i = 0; i < a.length; i++) {
    sum += a[i] + b[i];
  }
  return sum;
}

import { sumArray } from './sumArray';

const a = [1, 2, 3, 4, 5];
const b = [6, 7, 8, 9, 10];

const sum = sumArray(a, b);
console.log(sum);

export { sum };

这样，我们就解决了 TypeError: undefined is not a function 的错误！

总结

在开发中，使用 Babel 编译 ES6 代码时，我们可能会遇到 TypeError: undefined is not a function 的错误。这个错误通常是由于 Babel 编译时没有按照正确的顺序编译导致的，我们可以在 Babel 插件配置中添加 plugin-transform-modules-commonjs 插件来解决这个问题，或者手动调整代码顺序以解决这个问题。希望这篇文章能够帮助你更好地理解 Babel 编译 ES6 代码时遇到的问题，并解决这个问题。

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