Babel简单学习笔记

ES6出来很久了，项目中没有用到，我也一直没仔细去看。一直抱着先把ES5打扎实再说，然后时间在不知不觉中过去了。我还是了解地太少太少了。终于，开始踏出接触新知识的第一步了。

Babel的作用就是将ES6代码转译成现代浏览器基本都支持的ES5代码。本文简单记录Babel的入门。

文章较水，就是以自己的理解整理网上现有的一些资源教程，供自己参考。

安装

先把安装Babel命令行工具和预设置：

npm install --save-dev babel-cli babel-preset-env

可能的转码规则：

# 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

其他可能用到的npm包：

"babel-core"      // Babel的API代码"babel-node"      // 直接运行ES6脚本"babel-loader"    // 在webpack中使用的加载器  "babel-register"  // 自动对require的.js .jsx .es .es6进行转码"babel-polyfill"  // 支持ES6的一些新特性，比如Generator，Promise"babel-plugin-transform-runtime" // 运行时按需加载polyfill

配置

在项目根目录下创建一个.babelrc文件，配置相关属性如下。

{  "presets": [                       //预设置的语法    "es2015",    "stage-2"  ],    "plugins": ["transform-runtime"],  //插件  "comments": false,                 //除掉脚本中的注释 }

也可以在package.json文件中配置：

{  "name": "my-package",  "version": "1.0.0",  "babel": {    // babel相关属性配置  }}

使用

利用npm script的形式，在package.json中编写脚本：

 {   // ...    "scripts": {     "build": "babel src -d lib"   }, }

运行时执行以下命令：

npm run build

Babel命令行的语法如下：

 # 转码结果输出到标准输出 $ babel example.js # 转码结果写入一个文件 # --out-file 或 -o 参数指定输出文件 $ babel example.js --out-file compiled.js # 或者 $ babel example.js -o compiled.js # 整个目录转码 # --out-dir 或 -d 参数指定输出目录 $ babel src --out-dir lib # 或者 $ babel src -d lib # -s 参数生成source map文件 $ babel src -d lib -s

这样就可以简单地运行Babel了。

参考资料：

• 阮一峰 Babel入门教程
• Babel官网

转载请注明出处：http://blog.csdn.net/fen747042796 野草园

欢迎关注我的知乎：野蛮的小小芬