## 一、概述 历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的`require`、Python 的`import`，甚至就连 CSS 都有`@import`，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍； 在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。 ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以**取代 CommonJS 和 AMD 规范**，成为浏览器和服务器通用的模块解决方案； ## 二、特点 ES6 模块不是对象，而是通过`export`命令显式指定输出的代码，再通过`import`命令输入； 模块功能主要由两个命令构成：`export`和`import`；`export`命令用于规定模块的对外接口，`import`命令用于输入其他模块提供的功能； ## 三、export 一个模块就是一个独立的文件。该文件内部的所有变量、函数、类，外部无法获取。如果你希望外部能够读取模块内部的某个变量、函数、类，就必须使用`export`关键字输出； 1、`export`输出的变量、函数、类就是本来的名字，但是可以使用`as`关键字重命名； 2、`export`命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错； 3、`export`命令规定的是对外的接口，必须与模块内部的变量、函数、类建立一一对应关系； ## 四、import 使用`export`命令定义了模块的对外接口以后，其他 JS 文件就可以通过`import`命令加载这个模块； 1、`import`命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（`profile.js`）对外接口的名称相同； 2、如果想为输入的变量重新取一个名字，`import`命令要使用`as`关键字，将输入的变量重命名； 3、`import`后面的`from`指定模块文件的位置，可以是**相对路径**，也可以是**绝对路径**。如果不带有路径，只是一个模块名，那么**必须有配置文件**，告诉 JavaScript 引擎该模块的位置； 4、`import`语句会执行所加载的模块； 5、除了指定加载某个输出值，还可以使用整体加载，即用星号（`*`）指定一个对象，所有输出值都加载在这个对象上面； ## 五、export default 使用`import`命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到`export default`命令，为模块指定默认输出。 ## 六、参考 详细的模块化知识，参考：[前端技术/标准扩展/javascript/TypeScript/模块化](../../%E6%A0%87%E5%87%86%E6%89%A9%E5%B1%95/javascript/TypeScript/%E6%A8%A1%E5%9D%97%E5%8C%96.md)