ES2015 == ES6 (以年份命名小);20%的语法,在ES6的日常使用中占了80%。

  • 标准委员会最终决定,标准在每年的6月份正式发布一次,作为当年的正式版本。接下来的时间,就在这个版本的基础上做改动,直到下一年的6月份,草案就自然变成了新一年的版本。这样一来,就不需要以前的版本号了,只要用年份标记就可以了。
  • Babel preset that automatically determines the Babel plugins you need based on your supported environments. Uses compat-table.
  • Babel is a compiler. At a high level, it has 3 stages that it runs code in: parsing, transforming, and generation (like many other compilers).You will need to add some plugins for Babel to do anything (they affect the 2nd stage, transformation).
  • Since Babel only transforms syntax (like arrow functions), you can use babel-polyfill in order to support new globals such as Promise or new native methods like String.padStart (left-pad).
  • 如果某些代码需要调用Babel的API进行转码,就要使用babel-core模块。eg:

    1
    2
    3
    4
    5
    6
    7
    var es6Code = 'let x = n => n + 1';
    var es5Code = require('babel-core')
    .transform(es6Code, {
    presets: ['es2015']
    })
    .code;
    // '"use strict";\n\nvar x = function x(n) {\n return n + 1;\n};'
  • Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。举例来说,ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行,必须使用babel-polyfill,为当前环境提供一个垫片。

  • babal-loader使用”presets“配置项来标识如何将ES6语法转成ES5以及如何转换React的JSX成js文件。
  • transform-runtime:Another purpose of this transformer is to create a sandboxed environment for your code. If you use babel-polyfill and the built-ins it provides such as Promise, Set and Map, those will pollute the global scope. While this might be ok for an app or a command line tool, it becomes a problem if your code is a library which you intend to publish for others to use or if you can’t exactly control the environment in which your code will run.
  • Babel默认不转码的API非常多,详细清单可以查看babel-plugin-transform-runtime模块的definitions.js文件。
  • es6的模块加载是属于多对象多加载,而commonjs则属于单对象单加载。babel需要做一些手脚才能将es6的模块写法写成commonjs的写法。主要是通过定义__esModule这个属性来判断这个模块是否经过babel的编译。然后通过_interopRequireWildcard对各个模块的引用进行相应的处理。
  • polyfill这个单词翻译成中文是垫片的意思,详细点解释就是桌子的桌脚有一边矮一点,拿一个东西把桌子垫平。polyfill在代码中的作用主要是用已经存在的语法和api实现一些浏览器还没有实现的api,对浏览器的一些缺陷做一些修补。
  • 使用babel-preset-env会根据useBuiltIns是否为true自动引入polyfill,useBuiltIns会根据target的配置去除掉那些不必要的polyfill。(根据environment也就是根据targets的指定,即浏览器的版本)
  • 关于polyfill还有个叫做polyfill.io的神器,只要在浏览器引入https://cdn.polyfill.io/v2/polyfill.js。服务器会根据浏览器的UserAgent返回对应的polyfill文件,很神奇,可以说这是目前最优雅的解决polyfill过大的方案。
  • babel的转译只是语法层次的转译,前面说过有些api层次的东西需要引入polyfill,同样babel也有一系列插件来支持这些。

Comments

2017-06-27

⬆︎TOP