简介
Babel 是一个广泛使用的转码器,可以将ES6代码转为ES5代码;并且还可以支持React的JSX写法。
安装
请确定你已经安装好Nodejs
现阶段在npm上下载的都是6.0以上版本,它和5.0版本的变化还是很大的,这里我们用的是6.0的最新版
请先打开cmd/终端,全局安装 babel-cli (命令行转码)
npm install -g babel-cli
然后进入项目根目录,创建package.json
npm init --yes
然后在项目本地安装
npm install --save-dev babel-cli babel-core babel-preset-es2015 babel-preset-react
配置
在项目根目录下创建新文件“.babelrc”
该文件用来设置转码规则和插件,基本格式如下
{ "presets": [],"plugins": [] }
presets字段设定转码规则。我们安装了babel-preset-es2015和babel-preset-react
前者是将ES6转换为ES5,后者是React的转码规则
将这2个规则写入“.babelrc”中
{ "presets": [ "es2015","react" ],"plugins": [] }
编译
在根目录下创建2个文件夹。src是开发时文件的目录,lib是执行编译后输出文件的目录
├── lib
└── src
现在在src文件夹下创建一个test.js,这里用ES6来写React
class Test extends React.Component { render() { return ( <h1>test</h1> ); } } ReactDOM.render(<Test />,document.body);
这里在cmd/终端执行语句 “babel 输入目录 -d 输出目录”
babel src -d lib
执行成功后lib文件夹下就会多出一个test.js
var Test = function (_React$Component) { _inherits(Test,_React$Component); function Test() { _classCallCheck(this,Test); return _possibleConstructorReturn(this,(Test.__proto__ || Object.getPrototypeOf(Test)).apply(this,arguments)); } _createClass(Test,[{ key: "render",value: function render() { return React.createElement( "h1",null,"test" ); } }]); return Test; }(React.Component); ReactDOM.render(React.createElement(Test,null),document.body);
改写package.json
在package.json中改写scripts属性
"scripts": { "babel": "babel src -d lib" }
这时在cmd/终端运行
npm run babel
执行成功会发现与执行babel src -d lib效果是一样的