Babel 转换成 CommonJS 时函数默认执行的解决方法

在前端开发中，我们常常会使用 Babel 将 ES6 代码转换成 ES5 代码，同时使用 CommonJS 规范来进行模块化开发。但是在使用 Babel 转换时，我们可能会遇到一个问题：函数默认执行。在 ES6 中，我们可以使用箭头函数来定义默认执行函数：

const fn = () => {
  console.log('default execute');
}

但是在转换成 CommonJS 后，这个函数会默认执行，而不是被当做一个模块导出：

// javascriptcn.com 代码示例
'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
const fn = () => {
  console.log('default execute');
};

fn(); // 默认执行

exports.default = fn;

这可能会导致一些问题，例如在测试时无法正常使用导出的函数。那么，如何解决这个问题呢？本文将为大家介绍两种解决方法。

方法一：使用 exports

我们可以手动将默认执行的函数赋值给 exports 对象，而不是使用 exports.default。这样，函数就不会默认执行了：

// javascriptcn.com 代码示例
'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
const fn = () => {
  console.log('default execute');
};

exports.fn = fn; // 手动导出

// 不再默认执行
// fn();

这种方法比较简单，但是需要手动修改代码，不太方便。

方法二：使用 @babel/plugin-transform-modules-commonjs

@babel/plugin-transform-modules-commonjs 是 Babel 的一个插件，用于将 ES6 模块转换成 CommonJS 模块。在使用这个插件时，我们可以传入一个选项 noInterop，它可以禁用默认导出的转换：

{
  "plugins": [
    ["@babel/plugin-transform-modules-commonjs", {
      "noInterop": true
    }]
  ]
}

这样，在转换成 CommonJS 后，函数就不会默认执行了：

// javascriptcn.com 代码示例
'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
const fn = () => {
  console.log('default execute');
};

exports.default = fn;

这种方法需要使用 Babel 的插件，但是可以自动解决问题，不需要手动修改代码。

总结

在使用 Babel 将 ES6 代码转换成 CommonJS 时，我们可能会遇到函数默认执行的问题。本文介绍了两种解决方法：手动导出和使用 @babel/plugin-transform-modules-commonjs 插件的选项 noInterop。需要注意的是，这个问题只会在 CommonJS 规范下出现，在其他规范下可能并不会存在。

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