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