美文网首页马文的地下室
学习笔记 《Babel》

学习笔记 《Babel》

作者: 马文Marvin | 来源:发表于2017-04-27 18:05 被阅读14次

    作为一门按照标准制定,浏览器厂商各自实现的程序语言,从新语法的提出到标准化,需要经历漫长的历程,Babel 的价值就在于可以在新语法出现之前,尝鲜各种新语法,而不用担心浏览器兼容的问题,所以把 Babel 称为「编译」是非常合适的

    对于一门与时俱进的语言而言,这样的「编译」机制是非常重要的,才有了各种各样创新的机会存在,CoffeeScript、TypeScript 都是在这样的情况下产生和发展起来的

    Babel Presets

    Babel 由许许多多的插件构成,然后不同的插件组合到一起成为一个 Preset,官方支持的 Presets 有:

    env: 自身运行的基础插件包
    es2015: es2015 支持插件包
    es2016: es2016 支持插件包
    es2017: es2017 支持插件包
    latest: es2015+es2016+es2017支持的插件包
    react: react 支持的插件包
    flow: flow 支持的插件包(支持变量类型检测)

    在 github 上可以搜索到近千个用户自定义出来的 babel 插件包:https://www.npmjs.com/search?q=babel-preset

    此外官方还提供对于正在标准化过程中的JS语法方面的插件包,他们内部本身是向前保持依赖关系的,可以通过 npm view babel-preset-stage-0 类似的命令查看到:

    Stage 0: 草案阶段
    Stage 1: 提议阶段
    Stage 2: 起草阶段
    Stage 3: 候选阶段
    Stage 4: 完成阶段

    Babel Polyfill

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

    要使用这些新的接口,就要调用 babel-polyfill 插件:

    npm install babel-polyfill
    

    程序中:

    import "babel-polyfill"
    

    Webpack中:

    module.exports = {
      entry: ['babel-polyfill', './app/js']
    }
    

    Babel Babili

    Babel 官方还自己做了一个叫做 babili 的 JS 压缩工具:
    https://github.com/babel/babili

    Babel 的使用

    Babel 的使用需要借助 .babelrc 或者 package.json 文件,官方文档有详细的介绍:
    https://babeljs.io/docs/usage/babelrc/

    相关文章

      网友评论

        本文标题:学习笔记 《Babel》

        本文链接:https://www.haomeiwen.com/subject/tyjpzttx.html