React技术栈----Babel使用

一、配置.babelrc文件

  1.安装对应的转码规则:

    npm install --save-dev babel-preset-es2015(ES5)

    npm install --save-dev babel-preset-react(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
  2.配置此文件
    
{
  "presets": [
        "es2015",
        "react",
        "stage-2"
      ],
      "plugins": []
    }
二、命令行转码
  1、
babel example.js(显示当前转码后运行结果)
  2、
babel example.js -o compiled.js(指定转码到文件)
  3、
babel src -d lib(文件夹内全部转码)
三、使用
  1、将babel安装在项目中
npm install --save-dev babel-cli
  2、修改package文件

    {

    "devDependencies": {
        "babel-cli": "^6.0.0"
      },
      "scripts": {
        "build": "babel src -d lib"
      },
    }
  3、转码使用
npm run build
四、其他使用
  1、babel-node babel-cli自带命令,可以直接执行es6
  2、
npm install --save-dev babel-register(适合开发环境)
      babel-register模块改写require命令,为它加上一个钩子。此后,每当使用require加载.js.jsx.es.es6后缀名的文件,就会先用Babel进行转码。
  3、
babel-register用法:
    require("babel-register");
    require("./index.js");
  4、
npm install --save babel-polyfill(转换ES6新的api方法),用法同3
 
 
 
 
 
 
 
posted @ 2018-07-19 14:40  漠小飞  阅读(345)  评论(0编辑  收藏  举报