整理引用
https://github.com/sunyongjian/blog/issues/30
http://www.ruanyifeng.com/blog/2016/01/babel.html
问题更新:
1.其实是不是引用了 babel-plugin-transform-runtime 做了别名的处理 其实如果本地已经有了promise 也是不走本地的 因为给你打包了一个 __promise在dist里面了 并且里面的promise全部都被编译成 __promise
2.另外一个就是 不同的平台 用同一套代码的话其实是不合理的 因为有的平台 有promise 那就不需要在打包 实际上也是增加了代码的容量 也算是牺牲了一个成全另一个
正文
babel
Babel提供babel-cli工具,用于命令行转码。
babel-node
babel-cli工具自带一个babel-node命令,提供一个支持ES6的REPL环境。它支持Node的REPL环境的所有功能,而且可以直接运行ES6代码。
babel-register
babel-register模块改写require命令,为它加上一个钩子。此后,每当使用require加载.js、.jsx、.es和.es6后缀名的文件,就会先用Babel进行转码。
直接在文件中 引用 就可以运行es6 文件了 (实时编译)
使用时,必须首先加载babel-register。
require("babel-register");
require("./index.js");
需要注意的是,babel-register只会对require命令加载的文件转码,而不会对当前文件转码。另外,由于它是实时转码,所以只适合在开发环境使用。
babel-core
如果某些代码需要调用Babel的API进行转码,就要使用babel-core模块。
babel-polyfill
举例来说,ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行,必须使用babel-polyfill,为当前环境提供一个垫片。
transform-runtime 对比 babel-polyfill
其实通过上面的介绍我们已经了解他们是干什么的了,这里再稍微总结区分一下吧。我在这里把 babel-runtime 和 babel-plugin-transform-runtime 统称为 transform-runtime,因为一起用才比较好。
babel-polyfill 是当前环境注入这些 es6+ 标准的垫片,好处是引用一次,不再担心兼容,而且它就是全局下的包,代码的任何地方都可以使用。缺点也很明显,它会污染原生的一些方法,polyfill 把原生的方法重写了,如果当前项目已经有一个 polyfill 的包了,那你只能保留其一。而且一次性引入这么一个包,会大大增加体积。如果你只是用几个特性,就没必要了,如果你是开发较大的应用,而且会频繁使用新特性并考虑兼容,那就直接引入吧。
transform-runtime 是利用 plugin 自动识别并替换代码中的新特性,你不需要再引入,只需要装好 babel-runtime 和 配好 plugin 就可以了。好处是按需替换,检测到你需要哪个,就引入哪个 polyfill,如果只用了一部分,打包完的文件体积对比 babel-polyfill 会小很多。而且 transform-runtime 不会污染原生的对象,方法,也不会对其他 polyfill 产生影响。所以 transform-runtime 的方式更适合开发工具包,库,一方面是体积够小,另一方面是用户(开发者)不会因为引用了我们的工具,包而污染了全局的原生方法,产生副作用,还是应该留给用户自己去选择。缺点是随着应用的增大,相同的 polyfill 每个模块都要做重复的工作(检测,替换),虽然 polyfill 只是引用,编译效率不够高效。另外,instance 上新添加的一些方法,babel-plugin-transform-runtime 是没有做处理的,比如 数组的 includes, filter, fill 等,这个算是一个关键问题吧,直接推荐用 polyfill。link
另外,关于 babel-runtime 为什么是 dependencies 依赖。它只是一个集中了 polyfill 的 library,对应需要的 polyfill 都是要引入项目中,并跟项目代码一起打包的。不过它不会都引入,你用了哪个,plugin 就给你 require 哪个。所以即使你最终项目只是 require('babel-runtime/core-js/object/values')其中的一个文件,但是对于这包来说,也是生产依赖的。