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 时大

上一篇:112. 路径总和


下一篇:Oratop工具——实时数据库性能监控工具