ES6模块与CommonJS模块的差异
ES6 模块与 CommonJS 模块完全不同 它们有三个重大差异
- CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用
- CommonJS 模块是运行时加载，ES6 模块是编译时输出接口
- CommonJS 模块的
require() 是同步加载模块，ES6 模块的 import 命令是异步加载，有一个独立的模块依赖的解析阶段 第二个差异是 CommonJS 加载的是一个对象（即 module.exports 属性），该对象只有在脚本运行完才会生成，而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。
CommonJS 模块是 Node.js 专用的，语法上面，与 ES6 模块最明显的差异是，CommonJS 模块使用 require() 和 module.exports ，ES6 模块使用 import 和 export。
ES6 中 module 的语法
ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。 ES6模块不是对象，而是通过 export 命令显式指定输出的代码，再通过 import 命令输入。
export 命令
模块功能主要由两个命令构成：export 和 import。 export 命令用于规定模块的对外接口，import 命令用于输入其他模块提供的功能。 一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果希望外部能够读取模块内部的某个变量，就必须使用 export 关键字输出该变量。
export 输出变量
// export.js
let firstName = 'Mark'
let lastName = 'Dave'
export { firstName, lastName }
上面代码在 export 命令后面，使用大括号指定所要输出的一组变量。
export 输出函数或类
export 命令除了输出变量，还可以输出函数或类（class）
export function multiply(x, y) {
return x * y
}
上面代码对外输出一个函数 `multiply
export使用as重命名
通常情况下，export 输出的变量是本来的名字，但是可以使用 as 关键字重命名
function fun1() { ... }
function fun2() { ... }
export {
fun1 as streamFun1,
fun2 as streamFun2,
fun2 as streamLatestFun
}
上面代码使用 as 关键字，重命名了函数 fun1 和 fun2 的对外接口，重命名后，fun2可以用不同的名字输出两次
export 规定的对外接口，必须与模块内部的变量一一对应
export 命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系
// 报错
export 1;
// 报错
let m = 1
export m;
上面两种写法都会报错，因为没有提供对外的接口。第一种写法直接输出1，第二种写法通过变量 m，还是直接输出1,1只是一个值，不是接口。正确的写法如下：
// 写法1
export let m = 1;
// 写法2
let m = 1
export { m }
// 写法3
let n = 2
export { n as m }
上面三种写法都是正确的，规定了对外的接口 m。其他脚本可以通过这个接口，取到值 1.它们的实质是，在接口名和模块内部变量之间，建立了一一对应的关系。
同样，function 和 class 的输出，也必须同样遵守这样的写法
// 报错
function f() {}
export f
// 正确
function f() {}
export { f }
// 正确
export function f() {}
export可以出现在模块的任何位置，只要处于模块顶层就可以
export 命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错
function foo() {
export default 'bar' // SyntaxError
}
foo()
上面代码中，export 语句放在函数之中，结果报错
export default 命令
使用 import 命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。 为了给用户提供方便，让它们不用阅读文档就能加载模块，就要用到 export default 命令，为模块指定默认输出。
// export-default.js
export default function() {
console.log('foo')
}
上面代码是一个模块文件 export-default.js ，它默认输出是一个函数。 其他模块加载该模块时，import 命令可以为该匿名函数指定任意名字。
// import-default.js
import customName from './export-default'
customName()
上面代码的 import 命令，可以用任意名称指向 export-default.js 输出的方法，这时就不需要知道原模块输出的函数名。需要注意的是，这时 import 命令后面，不使用大括号。 export default 命令用在非匿名函数前，也是可以的
export default function foo() {
console.log('foo')
}
// 或者写成
function foo() {
console.log('foo')
}
export default foo
上面代码中，foo 函数的函数名 foo ，在模块外部是无效的。加载的时候，视同匿名函数加载。 下面比较一下默认输出和正常输出：
// 第一组
export default function crc32() {}
import crc32 from 'crc32'
// 第二组
export function crc32() {}
import { crc32 } from 'crc32'
上面两组写法，第一组是使用 export default 时，对应的 import 语句不需要使用大括号；第二组是不使用 export default 时，对应的 import 语句需要使用大括号。
export default 命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此 export default 命令只能使用一次。所以，import 命令后面才不用加大括号，因为只可能唯一对应 export default 命令。 本质上，export default 就是输出一个叫做 default 的变量或方法，然后系统允许你为它取任意名字。所以，下面的写法是有效的。
// module.js
function add(x, y) {
return x + y
}
export { add as default }
// 等同于
export default add
// main.js
import { default as foo } from 'modules'
// 等同于
import foo from 'modules'
正是因为 export default 命令其实只是输出一个叫做 default 的变量，所以它后面不能跟变量声明语句。
// 正确
export let a = 1
// 正确
let a = 1
export default a
// 错误
export default let a = 1
上面代码中，export default a 的含义是将变量 a 的值赋值给变量 default。所以，最后一种写法会报错。 同样地，因为 export default 命令的本质是将后面的值，赋给 default 变量，所以可以直接将一根值写在 rcport default 之后
// 正确
export default 42
// 报错
export 42
如果想在一条 import 语句中，同时输入默认方法和其他接口，可以写成下面这样
import _, { each, forEach } from 'lodash'
export default 也可以用来输出类
// MyClass.js
export default class { ... }
// main.js
import MyClass from 'MyClass'
let o = new MyClass()
import 命令
使用 export 命令定义了模块的对外接口后，其他 js 文件就可以通过 import 命令加载这个模块。
// import.js
import { firstName, lastName } from './export.js'
function setName(element) {
element.textContent = firstName + ' ' + lastName
}
上面代码的 import 命令，用于加载 export.js 文件，并从中输入变量。import 命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块 export.js 对外借款的名称相同
import 使用 as 重命名变量
如果想为输入的变量重新取一个名字，import 命令要使用 as 关键字，将输入的变量重命名。
import { lastName } as surname from './export.js'
import`命令输入的变量都是只读的
import 命令输入的变量都是只读的，，因为它的本质是输入接口。也就是说，不允许在加载模块的脚本里面，改写接口。
import { a } from './xxx.js
a = {} // Syntax Error: 'a' is read-only
上面代码中，脚本加载了变量 a，对其重新赋值就会报错，因为 a 是一个只读的接口，但是，如果 a 是一个对象，改写 a 的属性是允许的
import { a } from './xxx.js'
a.foo = 'hello' // 合法操作
上面代码中，a 的属性可以改写成功，并且其他模块也可以读到改写后的值，不过，这种写法很难查错，建议凡是输入的变量，丢完全当做只读，不要轻易改变它的属性。
import 后面的 from 指定模块文件的位置，可以是相对路径，也可以是绝对路径。如果不带有路径，只是一个模块名，那么必须有配置文件，告诉 javascript 引擎该模块的位置。
import 具有提升效果
import 命令具有提升效果，会提升到整个模块的头部，首先执行
foo()
import { foo } from 'my_module'
上面的代码不会报错，因为 import 的执行早于 foo 的调用。这种行为的本质是，import 命令是编译阶段执行的，在代码运行之前。
import 是静态执行，不能使用表达式和变量
由于 import 是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构
// 报错
import { 'f' + 'oo' } from ''my_module
// 报错
let module = 'my_module'
import { foo } from module
// 报错
if (x === 1) {
import { foo } from 'module1'
} else {
import { foo } from 'module2'
}
上面三种写法都会报错，因为它们用到了表达式、变量和 if 结构。在静态分析阶段，这些语法是没法得到值的。 最后，import 语句会执行所加载的模块，因此可以有下面的写法：
import 'lodash'
上面代码仅仅执行 lodash 模块，但是不输入任何值。 如果多次重复执行同一句 import语句，那么只会执行一次，而不会执行多次。
import 'lodash'
import 'lodash'
上面代码加载了两次 lodash，但是只会执行一次
import { foo } from 'my_module'
import { bar } from 'my_module'
// 等同于
import { foo, bar } from 'my_module'
上面代码中，虽然 foo 和 bar 在两个语句中加载，但是它们对应的是同一个 my_module模块，也就是说，import 语句是singleton 模式。
模块的整体加载
除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上。 例如，下面是一个 circle.js 文件，它输出两个方法 area 和 circum
// circle.js
export function area(radius) {
return Math.PI * radius * radius
}
export function circum(radius) {
return @ * Math.PI * radius
}
现在，加载这个模块
// main.js
import {area, circum} from './circle'
console.log(area(4))
console.log(circum(14))
上面写法是逐一指定要加载的方法，整体加载的写法如下。
import * as circle from './circle'
console.log(circle.area(4))
console.log(circle.circum(14))
注意：模块整体加载所在的那个对象（上例是 circle），应该是可以静态分析的，所以不允许运行时改变。下面的写法都是不允许的。
import * as circle from './circle'
// 下面两行都是不允许的
circle.foo = 'hello'
circle.area = function () {}
export 和 import 的复合写法
如果在一根模块之中，先输入后输出同一个模块，import 语句可以与 export 语句写在一起。
export { foo, bar } from 'my_module'
// 可以简单理解为
import { foo, bar } from 'my_module'
export { foo, bar }
上面代码中，export 和 import 语句可以结合在一起，写成一行。但需要注意的是，写成一行以后，foo 和 bar 实际上并没有被导入当前模块，只是相当于对外转发了这两个接口，导致当前模块不能直接使用 foo 和 bar。 模块的接口改名和整体输出，也可以采用这种写法
// 接口改名
export { foo as myFoo } from 'my_module'
// 整体输出
export * from 'my_module'
默认接口的写法如下：
export { default } from 'foo'
具名接口改为默认接口的写法如下
export { es6 as default } from './someModule'
// 等同于
import { es6 } from './someModule'
export default es6
同样的，默认接口也可以改名为具名接口
export { default as es6 } from './someModule'
import()
import 和 export 命令只能在模块的顶层，不能在代码块之中（比如，在 if 代码块之中，或在函数之中） ES2020提案引入 import() 函数，支持动态加载模块
import(specifier)
上面代码中，import 函数的参数 specifier，指定所要加载的模块的位置，import 命令能够接受上面参数，import() 函数就能接受上面参数，两者区别主要是后者为动态加载。 import() 返回一个 Promise 对象。如
const main = document.querySelector('main');
import(`./section-modules/${someVariable}.js`)
.then(module => {
module.loadPageInto(main);
})
.catch(err => {
main.textContent = err.message;
});
import() 函数可以用在任何地方，不仅仅是模块，非模块的脚本也可以使用。它是运行时执行，也就是说，什么时候运行到这一句，就会加载指定的模块。另外，import() 函数与所加载的模块没有静态连接关系，这点也是与 import 语句不相同。import() 类似于 Node 的 require 方法，区别主要是前者是异步加载，后者是同步加载。
适用场合
按需加载
import() 可以在需要的时候，再加载某个模块
button.addEventListener('click', event => {
import('./dialogBox.js')
.then(dialogBox => {
dialogBox.open();
})
.catch(error => {
/* Error handling */
})
});
上面代码中，import() 方法放在 click 事件的监听函数中，只有用户点击了按钮，才会加载这个模块。
条件加载
import() 可以放在 if 代码块，根据不同的情况，加载不同的模块
if (condition) {
import('moduleA').then(...);
} else {
import('moduleB').then(...);
}
上面代码中，如果满足条件，就加载模块 A，否则加载模块 B
动态的模块路径
import() 允许模块路径动态生成
import(f())
.then(...)
上面代码中，根据函数 f 的返回结果，加载不同的模块。
注意点
import() 加载模块成功以后，这个模块会作为一个对象，当作 then 方法的参数。因此，可以使用对象结构赋值的语法，获取输出接口
import('./myModule.js')
.then({export1, export2}) => {
// ...
})
上面代码中，export1 和 export2 都是 myModule.js 的输出接口，可以解构获得 如果想同时加载多个模块，可以
Promise.all([
import('./module1.js'),
import('./module2.js'),
import('./module3.js'),
])
.then(([module1, module2, module3]) => {
···
});
import() 也可以用在 async 函数中
async function main() {
const myModule = await import('./myModule.js');
const {export1, export2} = await import('./myModule.js');
const [module1, module2, module3] =
await Promise.all([
import('./module1.js'),
import('./module2.js'),
import('./module3.js'),
]);
}
main();
收起阅读 »
这里出错原因，可以通过错误并查看源码可知，这里部讲述。
