• 说说babel


    一.什么是babel

    二.如何配置

    三.配置babel-polyfill

    一.什么是babel

    The compiler for writing next generation JavaScript.

    官网是这么说的,翻译一下就是下一代JavaScript 语法的编译器。

    由于浏览器的版本和兼容性问题,很多JavaScript的新的方法都不能使用,等到可以大胆使用的时候,可能已经过去了好几年。Babel就因此而生,它可以让你放心使用大部分的JavaScript的新的标准的方法,然后编译成兼容绝大多数的主流浏览器的代码。在升级到了Babel6.x版本之后,所有的插件都是可插拔的。这也意味着你安装了Babel之后,是不能工作的,需要配置对应的.babelrc文件才能发挥完整的作用。下面就对Babel的presets和plugins配置做一个简单解析。

    二.如何配置

    1. 配置文件.babelrc

        Babel的配置文件是.babelrc,存放在项目的根目录下。使用Babel的第一步,就是配置这个文件。

       {
        "presets": [],
        "plugins": []
        }

    2.   presets字段设定转码规则,官方提供以下的规则集,你可以根据需要安装。

    # ES2015转码规则
    $ npm install --save-dev babel-preset-es2015

    # react转码规则
    $ npm install --save-dev babel-preset-react

    # ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个
    $ npm install --save-dev babel-preset-stage-0
    $ npm install --save-dev babel-preset-stage-1
    $ npm install --save-dev babel-preset-stage-2
    $ npm install --save-dev babel-preset-stage-3

    3.然后将这些规则加入.babelrc

    {
    "presets": [
    "es2015",
    "react",
    "stage-2"
    ],
    "plugins": []
    }

    4.其实看了上面的应该也明白了,presets,也就是一堆plugins的预设,起到方便的作用。如果你不采用presets,完全可以单独引入某个功能,比如以下的设置就会引入编译箭头函数的功能。

    {
    "plugins": ["transform-es2015-arrow-functions"]
    }
    还有一些方法是presets中不提供的,这时候就需要单独引入了,介绍几个常见的插件。

    transform-runtime
    {
    "plugins": ["transform-runtime", options]
    }

    主要有以下options选择。

    helpers: boolean,默认true
    使用babel的helper函数。

    polyfill: boolean,默认true
    使用babel的polyfill,但是不能完全取代babel-polyfill。

    regenerator: boolean,默认true
    使用babel的regenerator。

    moduleName: string,默认babel-runtime
    使用对应module处理。

    transform-remove-console
    {
    "plugins": ["transform-remove-console"]
    }
    使用这个插件,编译后的代码都会移除console.*,妈妈再也不用担心线上代码有多余的console.log了。当然很多时候,我们如果使用webpack,会在webpack中配置。

    5.Babel支持自定义的预设(presets)或插件(plugins)。如果你的插件在npm上,可以直接采用这种方式"plugins": ["babel-plugin-myPlugin"],当然,你也可以缩写,此外,你还可以采用本地的相对路径引入插件,比如"plugins": ["./node_modules/asdf/plugin"]。

    presets同理,示例

    {
      "presets": [
        "es2015",   //对应babel-preset-es2015
        "react",      //对应babel-preset-react
        "stage-0"   //对应babel-preset-stage-0
      ],
      "plugins": [
        "transform-decorators-legacy",  //对应babel-plugin-transform-decorators-legacy
        "transform-runtime",                  //对应babel-plugin-transform-runtime
      ]
    }
    6.最简配置

    {
    "presets": [
    "es2015",
    "stage-0"
    ],
    "plugins": ["transform-runtime"]
    }

    当然,如果你的项目需要react或者flow这些语法的编译,请在presets里加入对应的值即可

    三.babel-polyfill

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

    举例来说,ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行,必须使用babel-polyfill,为当前环境提供一个垫片。

    安装命令
    $ npm install --save babel-polyfill

    使用方式
    1.require('babel-polyfill')
    2.import 'babel-polyfill'
    3.module.exports={
    entry:["babel-polyfill","./app/js"]
    }
    第三种方式适用于使用webpack构建的同学,加入到webpack配置文件
    Babel默认不转码的API非常多,详细清单可以查看babel-plugin-transform-runtime模块的definitions.js文件。

    参考资料:
    https://excaliburhan.com/post/babel-preset-and-plugins.html
    https://www.jianshu.com/p/7bc7b0fadfc2
    http://www.ruanyifeng.com/blog/2016/01/babel.html
    https://www.cnblogs.com/liujb/p/BABEL-zhuan-ma-jie-huo.html#toc_2

  • 相关阅读:
    Java基本类型和引用类型 分类: Java 2015-08-04 14:51 6人阅读 评论(0) 收藏
    串口通信校验方式(even,odd,space,mark) 分类: 开发工具 2015-07-31 16:01 5人阅读 评论(0) 收藏
    学习SerialPort的笔记 分类: 开发工具 2015-07-31 15:51 5人阅读 评论(0) 收藏
    Java操作串口 分类: Java 2015-07-30 23:18 11人阅读 评论(0) 收藏
    JAVA Swt初识 分类: Java 2015-07-30 10:51 22人阅读 评论(0) 收藏
    用Java Swing编写简单的测试小工具界面(源码) 分类: Java 2015-07-30 10:49 23人阅读 评论(0) 收藏
    Java串口助手(程序源码) 分类: Java 2015-07-30 10:13 16人阅读 评论(0) 收藏
    Android使用蓝牙与PC端进行通信 分类: Android 2015-07-30 09:45 15人阅读 评论(0) 收藏
    Android当无线鼠标,通过蓝牙与pc通信,pc端用java写 分类: Android 2015-07-30 09:24 18人阅读 评论(0) 收藏
    Struts2注解
  • 原文地址:https://www.cnblogs.com/75115926/p/11772582.html
Copyright © 2020-2023  润新知