es6-模块化

前言

js模块化编程之彻底弄懂CommonJS和AMD/CMD!这篇文章写的很清楚有关es5之前的模块化。
es6 Module 的语法

重点

1、es6模块设计解决了es5中AMD和CMD的加载痛点

  • ES6 模块不是对象,而是通过export命令显式指定输出的代码,再通过import命令输入。
    1
    2
    // ES6模块
    import { stat, exists, readFile } from 'fs';
  • 上面代码的实质是从fs模块加载 3 个方法,其他方法不加载。这种加载称为“编译时加载”或者静态加载,即 ES6 可以在编译时就完成模块加载效率要比 CommonJS 模块的加载方式高。当然,这也导致了没法引用 ES6 模块本身,因为它不是对象。

2、es6中增加了import(),类似node中的require。
import()有以下优点:

  • 按需加载
  • 条件加载
  • import()允许模块路径动态生成。

3、export 和 export default的区别

  • export 后面跟的接口(我理解为对象): export {fun1,fun2}
  • export default 跟着是变量:export default fun1

4、支持情况
目前node和浏览器基本上对es6的import和export不是很友好。具体参考了cnode社区的期待已久 Nodejs 开始支持 ES6 模块但是看起来很蛋疼。
所以还是得用类似webpack的工具进行转义。

参考

js模块化编程之彻底弄懂CommonJS和AMD/CMD!