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

转载于:https://www.cnblogs.com/DesignerFly/p/9335715.html