Babel 编译 ES6 的 Export Default Function 时出现错误的解决方法

在前端开发中，ES6 已经成为了主流的编程语言，而 Babel 则是最常用的编译器之一。然而，在使用 Babel 编译 ES6 的 Export Default Function 时，有时会出现错误。本文将介绍这种错误的原因以及解决方法，并且提供实际的示例代码，以帮助读者更好地理解和学习。

问题描述

在使用 Babel 编译 ES6 代码时，如果使用了 Export Default Function，有时会出现以下错误：

SyntaxError: Unexpected token export

这个错误通常出现在使用 CommonJS 或 AMD 模块时，因为这些模块系统不支持 ES6 的 Export Default Function。

解决方法

解决这个问题的方法很简单，只需要将 ES6 的 Export Default Function 转换成 CommonJS 或 AMD 模块系统支持的形式即可。具体来说，有两种方法可以实现这个转换。

方法一：使用 Babel 插件

Babel 有一个插件叫做 transform-es2015-modules-commonjs（或者 transform-es2015-modules-amd），可以将 ES6 的模块语法转换成 CommonJS 或 AMD 模块系统支持的形式。只需要在 Babel 配置文件中添加这个插件，就可以解决这个问题。

示例代码：

// .babelrc
{
  "plugins": [
    ["transform-es2015-modules-commonjs", {
      "loose": true
    }]
  ]
}

// ES6 模块
export default function add(a, b) {
  return a + b;
}

// javascriptcn.com 代码示例
// 转换后的 CommonJS 模块
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = add;

function add(a, b) {
  return a + b;
}

方法二：手动转换

如果你不想使用 Babel 插件，也可以手动将 ES6 的 Export Default Function 转换成 CommonJS 或 AMD 模块系统支持的形式。具体来说，只需要将 ES6 的 Export Default Function 改成普通的函数声明，再将这个函数声明赋值给 module.exports 或者 exports.default 即可。

示例代码：

// ES6 模块
export default function add(a, b) {
  return a + b;
}

// 手动转换后的 CommonJS 模块
"use strict";

function add(a, b) {
  return a + b;
}

module.exports = add;

// 手动转换后的 AMD 模块
define(function(require, exports, module) {
  function add(a, b) {
    return a + b;
  }

  exports.default = add;
});

总结

在使用 Babel 编译 ES6 的 Export Default Function 时，可能会出现 CommonJS 或 AMD 模块系统不支持的错误。为了解决这个问题，我们可以使用 Babel 插件或者手动转换的方法将 ES6 的 Export Default Function 转换成 CommonJS 或 AMD 模块系统支持的形式。无论你选择哪种方法，都可以让你的代码在不同的模块系统中得到良好的兼容性。

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