babel

作者: pixels | 来源:发表于2017-12-12 15:53 被阅读13次
    babel-cli:

    命令行转码:<code>ng install -g babel-cli</code>
    基本用法:<code>babel example.js</code>

    babel-node

    babel-cli工具自带一个babel-node命令,支持node的REPL环境

    $ babel-node
    > (x => x * 2)(1)
    2
    
    babel-register

    为require添加一个钩子,require加载.js,.jsx,.es,.es6文件,会先用Babel转码,实时转码,只适用于开发环境

    babel-core

    转化JavaScript代码

    babel-polyfill

    babel默认只转化新的js句法,不转化API,babel-polyfill支持比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)等转码。

    babel-plugin-transform-runtime

    提供编译模块需要服用的工具函数
    (https://segmentfault.com/q/1010000005596587?from=singlemessage&isappinstalled=1)

    babel插件、预设、基于环境配置Babel

    plugins:配置插件

    { 
       "plugins": [ 
          ["transform-es2015-classes", { "loose": true }] 
        ] 
    }
    

    __ preset__
    presets字段设定转码规则

    babel-preset-es2015: es6转码规则

    babel-preset-react: react转码规则

    babel-preset-stage-x: JavaScript的一些提案,分为四个阶段

    • babel-preset-stage-0
    • babel-preset-stage-1
    • babel-preset-stage-2
    • babel-preset-stage-3

    基于环境配置

      {
        "presets": ["es2015"],
        "plugins": [],
        "env": {
           "development": {
              "plugins": [...]
           },
           "production": {
             "plugins": [...]
           }
        }
      }
    

    语法检查babel-eslint

    .eslintrc文件并设置 parser为 babel-eslint

    相关链接:
    https://github.com/thejameskyle/babel-handbook/blob/master/translations/zh-Hans/user-handbook.md#toc-babel-preset-es2015

    相关文章

      网友评论

          本文标题:babel

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