es6的模块系统

js引擎运行模块时:

1. 语法解析: 阅读模块源代码,检查语法错误;
2. 加载: 递归的加载所有被导入的模块(深度优先遍历),这一部分未被标准化.
3. 连接: 每遇到一个新加载的模块,为其创建作用域并将模块内声明的所有绑定填充到该作用域中,包括由其他模块导入的内容;
4. 运行时: 最终,在每一个新加载的模块体内执行所有语句, 导入过程结束.

系统不指定加载过程的实现方式

你可以通过在源代码中查找import声明提前计算出所有依赖，你可以将ES6系统实现为：
在编译时计算所有依赖并将所有模块打包成一个文件，通过网络一次传输所有模块！像webpack这样的工具就实现了这个功能。

为什么这样做?

因为通过网络加载脚本需要花费时间，每当你请求到一个模块，你可能发现它里面也包含着import声明，这就需要你再花费一些时间加载更多的脚本。这会消耗更多的网络往返时间

静态的模块系统

• 只可以在模块的最外层作用域使用import, export,不可以在条件语句中使用,也不能在函数作用域中使用import.
• 所有到处的标识符一定要在源代码中明确地导出它们的名称,你不能通过编写代码遍历一个数组然后用数据驱动的方式导出一堆名称.
• 模块对象呗冻结了,无法hack模块对象并为其添加polyfill风格的新特性.
• 一个模块的所有依赖必须在模块代码运行前完全加载,解析并且及早连接,不存在一种通过import来按需懒加载的语法.
• import模块产生的错误没有错误恢复机制,一旦一个模块加载出错,所有的模块都不会运行.无法用try/catch 来捕获错误.
• 不支持在模块加载依赖前运行其它代码的钩子,这意味着无法控制模块的依赖加载过程.

额外的动态编程加载器API------"动态",打破上面列举的规则

webpack引入了代码分割API来实现按需加载

" ES6模块语法非常静态，这是很好的——它通过强有力的编译时工具的形式进行弥补。但是设计静态语法的初衷是要与丰富的动态编程加载器API一起增强ES6的模块系统。"