webpack&babel学习笔记四

1.ES6module 和 commonjs区别

ES6静态引入，编译时引入，Commonjs动态引入，执行时引入，因此ES6module可以使用Tree-shaking

对于模块的依赖，Commonjs是动态的，ES6 Module 是静态的

Commonjs导入的是值的拷贝，改变引用值不会改变原模块中的变量，ES6 Module导入的是值的引用，会改变

commonjs引入函数可以重写，ES6 module不行

2.官方给出babel-polyfill 和 babel-runtime 两种解决方案来解决这种全局对象或全局对象方法不足的问题

babel-polyfill 会在应用中模拟一个 es2015+ 的环境，对新语法需要的新对象进行补全

babel-polyfill 的一些缺陷

1. babel-polyfill 可能会增加很多根本没有用到的 polyfill；
2. 可能会污染子模块的局部作用域，严重的可能会导致冲突

接着是 babel-runtime，简单说 babel-runtime 更像是一种按需加载的实现，比如你哪里需要使用 Promise，只要在这个文件头部 import Promise from 'babel-runtime/core-js/promise' 就行了

babel-runtime 的优劣势
此处说的优缺点是默认使用了 babel-plugin-transform-runtime

优势

不会污染全局变量
多次使用只会打包一次
依赖统一按需引入,无重复引入,无多余引入
避免 babel 编译的工具函数在每个模块里重复出现，减小库和工具包的体积

劣势

不支持实例化的方法如 Array.includes(x) 就不能转化
如果使用的API用的次数不是很多，那么transform-runtime 引入polyfill的包会比不是transform-runtime 时大