[ES6-重点纪录] Module System 模组系统

ES6 导入了模组系统的支援，它採用了 CommonJS 与 AMD 的优点，在编译时进行静态加载，而且可以使用于浏览器与伺服器端。概念上是将一个大程序拆分成互相依赖的小文件，需要用到时就拼装起来使用，这对开发大型或複杂的专案是很重要的。

特性

ES6 的模组程式码会自动採用严格模式，不管是否有使用"use strict"ES6 的模组是一个档案一个模组主要使用两个语句构成 :export做为模组对外的输出，放于档案最后import做为输入其他模组的功能，放于档案开头

基本的输出与输入

物件、类别、函数、常数...等等有变数名称的都可以输出都可以使用as关键字重新命名变数名称

export 输出方式

在定义时直接做为输出

export let str = 'Hello';export const obj = {a: 1};export function foo() {    console.log('function test');}

使用已定义好或已存在的变数做为输出，须加上大括号{}，用来统一输出

// 使用大括号"{}"做统一输出let str = 'Hello';const obj = {a: 1};let foo = function() {    console.log('function test');}// 也能使用 as 重新命名export {str, obj, foo as fooTest};

import 输入方式

使用大括号{}输入模组中有被 export 过的变数，后面加上档案路径或模组名称使用万用字元*输入模组中所有被 export 过的变数直接加载整个模组名称，只用来执行模组而已

// 基本使用，假设输出模组的档案名称为 myModule.jsimport {str, obj, fooTest} from './myModule.js';fooTest();// 使用万用字元*import * as module from './myModule.js';console.log(module.str); console.log(module.obj);// 直接加载整个模组名称import 'jquery'; 

使用 export default 输出与输入

主要是用来当作模组档案唯一的接口，指定为模组的"默认输出"可以输出匿名型态的函数、类别输入时可以指定任意名称做为输入的变数输入与输出都不必再加上大括号{}了一个模组只能有一个默认输出

// 档名: export.jsfunction circleArea(r) {    return console.log('area: ', r * r * 3.14);}export default circleArea;// --------------------------------------------// 档名: import.jsimport getArea from './export.js';getArea(10); // area: 100

export 与 import 的複合写法

概念为可以先输入后输出同一个模组，export 和 import 语句结合在一起的意思。主要用来把接口输出改名或改成默认的接口输出。

export { obj, foo } from './myModule.js';// 等同于import { obj, foo } from './myModule.js';export { obj, foo };// 改成默认的接口输出export { foo as default } from './lib.js';// 等同于import { foo } from './lib.js';export default foo;

如何在浏览器中运行实现

基本上 ES6 的程式码使用 Babel 转译成旧式的 JS 语法已经习以为常，但现今已有许多浏览器都支援 ES6 与模组系统了，可以直接写入语法，支援的浏览器参考 Can I use ...

运行模组系统使用以下方式 :

使用<script>标籤，再加入type="module"属性，直接放入 HTML 档案上就行了只需要写入主要执行的 JS 档案，其他组件或外部档案可以不必写入，模组系统会自动去关联其他被 import 的 JS 档案

// 档名: main.js import module from './myModule.js';// ...// --------------------------------------------// 档名: index.html<script type="module" src="./main.js"></script>

浏览器也允许内嵌语法在 HTML 网页中

<script type="module">  import module from './myModule.js';  // ...</script>

注: 有些浏览器需要藉由伺服器去运行，直接开启 HTML 档案是不行的