前言
ESM在模块之间的依赖关系是高度确定的,与运行状态无关,编译工具只需要对ESM模块做静态分析,就可以从代码字面中推断出哪些模块值未曾被其它模块使用,这是实现Tree Shaking技术的必要条件。
ES6模块化
概念
ES6模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS和AMD模块,都只能在运行时确定这些东西。比如,CommonJS模块就是对象,输入时必须查找对象属性。
基本使用
export命令用于规定模块的对接接口,import命令用于输入其他模块提供的功能。
模块默认输出,其他模块加载该模块时,import命令可以为该匿名函数指定任意名字。
ES6模块与CommonJS模块的差异
CommonJS模块输出的是一个值的拷贝,ES6模块输出的是值的引用;
CommonJS模块是运行时加载,ES6模块是编译时输出的接口;
第二个差异是因为CommonJS加载的是一个对象(即module.exports属性),该对象只有在脚本运行完才会生成。而ES6模块不是对象,他的对接接口只是一种静态定义,在代码静态解析阶段就会生成。
下面重点解释第一个差异,我们还是举上边这个CommonJS模块的加载机制例子