随着前端技术的不断发展，ES6 的广泛应用已成为趋势。而在实际的应用中，我们很有可能会使用到旧有的 CommonJS 或 AMD 形式的模块系统。为了解决这种情况，本文将带领读者了解如何将 ES6 模块转换为 CommonJS 或 AMD。
ES6 模块的基本语法
ES6 的模块系统在语法上与 CommonJS 或 AMD 是不同的。它使用了 import 和 export 关键字来定义模块。下面是 ES6 模块导出方法的示例代码：
// 导出模块：
export const a = 1;
export function add(x, y) {
return x + y;
}
// 导入模块：
import { a, add } from './module.js';转换为 CommonJS
安装 babel-cli 和 babel-plugin-transform-es2015-modules-commonjs
转换 ES6 模块为 CommonJS，最好的方式是使用 Babel 转换器。使用 Babel 前，我们需要安装 babel-cli 和 babel-plugin-transform-es2015-modules-commonjs 这两个依赖：
npm install --save-dev babel-cli babel-plugin-transform-es2015-modules-commonjs
配置 .babelrc
在项目的根目录创建 .babelrc 文件，并输入如下代码：
{
"plugins": [
"transform-es2015-modules-commonjs"
]
}该配置告诉 Babel 将 ES6 模块转换为 CommonJS。
运行 Babel 命令
在项目中运行以下命令即可将 ES6 模块转换为 CommonJS：
babel src --out-dir dist
其中，src 为源代码目录，dist 为输出目录。
使用 CommonJS
转换后的代码文件将被保存在 dist 目录中，并且可以直接被 CommonJS 使用：
// 导出模块：
exports.a = 1;
exports.add = function (x, y) {
return x + y;
};
// 导入模块：
const { a, add } = require('./module.js');转换为 AMD
安装 babel-cli 和 babel-plugin-transform-es2015-modules-amd
和转换为 CommonJS 相似，转换 ES6 模块为 AMD 也需要安装 babel-cli 和 babel-plugin-transform-es2015-modules-amd 这两个依赖：
npm install --save-dev babel-cli babel-plugin-transform-es2015-modules-amd
配置 .babelrc
在 .babelrc 文件中，输入如下代码：
-- -------------------- ---- -------
-
---------- -
-
-------------------------------
-
----------- ----------
-
-
-
-其中，moduleId 为最终输出的 AMD 模块 ID。
运行 Babel 命令
运行以下命令即可将 ES6 模块转换为 AMD：
babel src --out-dir dist
其中，src 为源代码目录，dist 为输出目录。
使用 AMD
转换后的代码文件将被保存在 dist 目录中，并且可以直接被 AMD 使用：
-- -------------------- ---- -------
------------------ - --------- -- ----------------- -
---- --------
------------------------------ ------------- -
------ ----
---
--------- - --
-------- ------ -- -
------ - - --
-
----------- - ----
---总结
本文通过简单的示例向读者介绍了如何将 ES6 模块转换为 CommonJS 或 AMD。在实践中，将 ES6 模块转换为旧有的模块系统是非常必要的，因为在一些情况下，旧有的模块系统是不可避免的。通过本文，读者能够了解到如何使用 Babel 转换器来完成这个任务，从而将 ES6 模块转换为你所需要的模块系统。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64521851675af4061b5c4112