一览js模块化：从CommonJS到ES6 (2)

ES6在语言的层面上实现了模块化。浏览器厂商和 Node.js 都宣布要原生支持该规范。它将逐渐取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

在 ES6 中，使用export关键字来导出模块，使用import关键字引用模块。但是浏览器还没有完全兼容，需要使用babel转换成ES5。

// 导出 export function hello() { }; export default { // ... }; // 导入 import { readFile } from 'fs'; import React from 'react';

使用import导入模块时，需要知道要加载的变量名或函数名。

在ES6中还提供了export default，为模块指定默认输出.对应导入模块import时，不需要使用大括号。

上面示例中的代码改写成ES6形式：

//math.js var num = 0; var add = function (a, b) { return a + b; }; export { num, add }; //导入 import { num, add } from './math'; function test(ele) { ele.textContent = add(1 + num); }

缺点

浏览器还没有完全兼容，必须通过工具转换成标准的 ES5 后才能正常运行。

5.小结

本文从script引入js文件讲起，到服务器端模块的规范CommonJs，再到推崇依赖前置的浏览器端模块的规范AMD、推崇依赖就近的浏览器端模块的规范CMD，最后介绍了ES6的模块化。每个介绍中都有各规范基本的用法和一个示例。如有问题，欢迎指正。