zoukankan      html  css  js  c++  java
  • 使用babel转换es6编写的程序

    配置文件

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

    该文件用来设置转码规则和插件,基本格式如下。

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

    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
    

    将你需要的规则加入.babelrc

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

    命令行转码

    配置好必要的文件后,下一步需要使用Babel提供的工具babel-cli,用于命令行转码。

    $ npm install --global babel-cli
    

    创建一个test.js,内容如下。

    const NAME = 'myName';
    

    转码结果输出到标准输出

    $ babel test.js
    

    会在命令行看到转码后的结果。

    var NAME = 'myName';
    

    转码结果写入一个文件

    $ babel test.js --out-file test.build.js
    

    执行命令后,会出现一个test.build.js,内容是对test.js转码后的结果。

    整个目录转码

    $ babel src --out-dir build
    

    当前项目

    上面代码是在全局环境下,进行Babel转码。这意味着,如果项目要运行,全局环境必须有Babel,也就是说项目产生了对环境的依赖。另一方面,这样做也无法支持不同项目使用不同版本的Babel。

    为解决这一问题,通常将babel-cli安装到项目中。

    $ npm install --save-dev babel-cli
    

    然后,改写package.json中的脚本。

    {
      // ...
      "scripts": {
        "babel": "babel src --out-dir build"
      }
    }
    

    再执行如下命令。

    $ npm run babel
    

    参考文档

  • 相关阅读:
    codeforces 587B
    codeforces 552E
    算法竞赛模板 字典树
    算法竞赛模板 二叉树
    算法竞赛模板 图形面积计算
    TZOJ 1545 Hurdles of 110m(动态规划)
    算法竞赛模板 判断线段相交
    算法竞赛模板 折线分割平面
    TZOJ 3005 Triangle(判断点是否在三角形内+卡精度)
    算法竞赛模板 KMP
  • 原文地址:https://www.cnblogs.com/xiaoyucoding/p/7489607.html
Copyright © 2011-2022 走看看