在前端开发中，模块化是非常重要的一环。虽然在 ES6 中，已经引入了原生的模块化语法，但是在实际开发中，我们还是经常使用 CommonJS 模块化来处理文件依赖关系。在 ES7 中，我们可以使用 babel-plugin-transform-es2015-modules-commonjs 插件来支持 CommonJS。
CommonJS 模块系统
CommonJS 是一个 JavaScript 模块规范，用于服务器端的 JavaScript 应用程序。它定义了如何组织模块以及如何使用它们。通过 module.exports 和 require 关键字，我们可以很方便地实现模块化。
定义模块
定义一个 Node.js 模块时，我们需要使用 exports 和 module.exports 这两个属性。其中，exports 是 module.exports 的一个引用，而启动模块加载时，返回的就是 module.exports。
// bar.js
exports.print = function() {
console.log('Hello World');
}导入模块
为了使用 exports 定义的模块，我们需要使用 require 关键字来导入。require 会在给定的路径下查找模块，并返回 exports 或 module.exports 的属性值。
// foo.js
var bar = require('./bar');
bar.print();使用 Babel 支持 CommonJS
虽然 ES6 带来了原生的模块语法，但是在实际开发中，我们经常需要使用 CommonJS 模块化来处理文件依赖关系。在 ES7 中，我们可以使用 babel-plugin-transform-es2015-modules-commonjs 插件来支持 CommonJS。
首先，我们需要安装插件。
$ npm install --save-dev babel-plugin-transform-es2015-modules-commonjs
然后，在 .babelrc 文件中配置插件。
-- -------------------- ---- -------
-
---------- -
---------
-------
--
---------- -
-----------------------------------
-
-接下来，我们就可以使用 ES6 的语法来编写 CommonJS 模块化了。
// bar.js
export function print() {
console.log('Hello World');
}// foo.js
import { print } from './bar';
print();总结
CommonJS 是一个 JavaScript 模块规范，通过 exports 和 require 关键字，我们可以很方便地实现模块化。在 ES7 中，我们可以使用 babel-plugin-transform-es2015-modules-commonjs 插件来支持 CommonJS。这能够帮助我们在前端开发中方便地处理文件依赖关系，增强代码的复用性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cc95de5ad90b6d0429b7c9