zoukankan      html  css  js  c++  java
  • 使用babel

    1).Babel支持NPM包形式的安装,打开命令行窗口,切换到项目根目录,命令如下

        npm install babel-cli

    2).安装成功后,在package.json文件里添加如下代码

     "scripts":{

       "start":"babel test.js  --out-file  test-compiled.js"

    }

    3).创建一个使用了ES6语法的javascript文件test.js 输入如下代码:

       [1,2,3].map(n=>n+1);

    4). test.js文件里的代码使用了ES6的箭头函数,需要使用babel解码。打开命令行窗口,输入如下命令:

    npm run start

    5).编译过后的代码输出到了test-compiled.js 代码如下

    [1,2,3].map(n=>n+1);

    6).编译后的代码没有变化,babel没有将箭头函数转换成普通函数,babel默认不对任何语法转换,需要事先通过配置文件来指定转码es6语法特性。创建配置文件"。babelrc",代码如下

    “plugins”:[

       "transform-es2015-arrow-functions"

    ]

    7).安装babel转换插件。打开命令行窗口,输入如下命令:

      npm  install babel-plugin-transform-es2015-arrow-functions

    注意:配置文件中插件的名字跟安装的NPM包的名字并不相同,配置文件内会省略前缀"babel-plugin"

    8).再次使用babel进行转码,打开命令窗口,输入如下命令:

    npm run start

    打开转码后的文件test-compiled.js 里面包含如下代码:

    "use strict"

    [1,2,3].map(function(n){return n+1 ;})

    箭头函数已经转换成了普通函数,转换后的代码可以直接在浏览器运行。

    插件“transform-es2015-arrow-functions”只负责对箭头函数转码,如果需要转码其他的ES6特性,需添加对应的插件到配置文件。babel插件列表可以通过访问页面

    http://babeljs.io/docs/plugins查看,里面包含了现有插件以及每个插件的使用方法和转码效果。

  • 相关阅读:
    OK335xS-Android mkmmc-android-ubifs.sh hacking
    OK335xS-Android pack-ubi-256M.sh hacking
    OK335xS Ubuntu 12.04.1 版本 Android 开发环境搭建
    Qt Quick Hello World hacking
    Qt QML referenceexamples attached Demo hacking
    QT 5.4.1 for Android Ubuntu QtWebView Demo
    I.MX6 working note for high efficiency
    QT 5.4.1 for Android Windows环境搭建
    mkbootimg hacking
    Generate And Play A Tone In Android hacking
  • 原文地址:https://www.cnblogs.com/zhousen34/p/8658439.html
Copyright © 2011-2022 走看看