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 的一些缺陷
-
babel-polyfill
可能会增加很多根本没有用到的 polyfill; - 可能会污染子模块的局部作用域,严重的可能会导致冲突
接着是 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 时大