09月22, 2017

当ES6遇到低版本IE

babel 能做什么?

Babel 自带了一组 ES2015 语法转化器。这些转化器能让你现在就使用最新的 JavaScript 语法,而不用等待浏览器提供支持。

它提供了一系列的预设,presets, 也就是一组已经内置的插件。

es2015, es2015 -> es5

stage-*, es7,es7+的语法 -> es5

* 其中,stage-0, transform-do-expressions, transform-function-bind,还包括stage-1,stage-2, stage-3的全部内容。
* stage-1, 提案阶段
* stage-2, 草案阶段,draft
* stage-3, 候选阶段

问题一: Babel 默认只转换新的 JavaScript 句法(syntax),比如let, const。而不转换新的 API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。

babel-polyfill

为了解决上面的问题一。它可以模拟es2015的环境。引入它之后,相当于引入了一个全局的es2015环境。 问题二, 比如在代码中并没有使用Promise,但是引入polyfill之后,也会把这部分的垫片加入,可以理解为是无用代码。

babel-transform-runtime

为了解决上面的问题二。相当于在每个使用到的地方,单独require。即便是在很多模块中多次require,但最终使用到的相应的polyfill只有一份。

es5-shim

就是说 ES5 中有些方法,是可以在旧 JS 引擎中完美模拟了,那么 shim 就完美模拟了它们。

主要是在Array,String以及其他一些对象上扩展的方法。

es5-sham

尽力模拟,ES5 中其他无法被完美模拟的方法,就由 sham 承包了。 sham 只承诺你用的时候代码不会崩溃,至于对应的方法是不是起作用它就不保证了。

主要是Object上的扩展方法。

es3ify-webpack-plugin或者es3-loader

把ES5转成ES3的语法

兼容IE8,成本大

react v15+, vue2 已经不支持IE8了!

其他遇到的问题,部分可以参见Make your React app work in IE8

新的问题

  • vue2 在IE11以下,包括IE11会报JS语法错,即便是加了pollyfill...
  • 关于使用了ES6,vue,react之后,究竟还需要不需要支持低版本的IE,是一个一直以来都在思考的问题。毕竟即便是做了各种兼容,也还是会遇到各种问题,而且每个case都还不太一样,无法总结出一套通用的经验。。

本文链接:https://imjiaolong.cn/post/babel.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。