12月21, 2015

玩转babel

bable一个js转换器,主要是把ES6/7的代码转换成ES5,让我们现在就能使用下一代的js

官网地址 http://babeljs.io/

最近出了6.0版本,所有的配置都模块化了

bable支持的工具和环境相当多,这里主要介绍下babel-cli,其它的转换成相应工具用法即可

CLI

官方推荐安装到本地项目里,通过npm脚本执行

首先cd到一个目录并初始化package.json

cd ~/babel && npm init

安装babel-cli

npm install --save-dev babel-cli

命令行执行

./node_modules/.bin/babel --help 查看帮助

具体用法可以从这里查看 http://babeljs.io/docs/usage/cli/

做个例子,监听src文件编译输出到dist目录

创建src、dist目录,监听编译要用的命令

./node_modules/.bin/babel -w src -d dist

这里可以借助npm script,package.json里增加

"scripts": {
     "watch": "babel -w src -d dist"
 }

执行如下即可

npm run watch

可以看到src下的文件内容都编译到了dist里,但有个问题就是代码是未经转换的

这是因为babel默认没有安装任何转换插件,需要你根据自己需要选择安装

从这里 http://babeljs.io/docs/plugins/ 可以看到一些插件列表

比如需要class的转换,安装class插件

npm install --save-dev babel-plugin-transform-es2015-classes

package.json 改动如下

"scripts": {
     "watch": "babel -w --plugins transform-es2015-classes src -d dist"
 }

这时写的class就可以看到变化了。

但如果所有插件都需要自己去定制也比较麻烦,所以bable为你提供了预设,

所谓预设就是一堆常用插件集,比如你需要编译es6的代码,安装es2015预设

npm install --save-dev babel-preset-es2015

package.json 改动如下

"scripts": {
     "watch": "babel -w --presets es2015 src -d dist"
 }

这时写的es6均被转换了,但其实也有个问题,我用的node4,像箭头函数,class等支持的我不需要转换,怎么处理?

这里可以安装如下社区版预设

npm install --save-dev babel-preset-es2015-node4

"scripts": {
     "watch": "babel -w --presets es2015-node4 src -d dist"
 }

这次可以看到支持的均未被转换。

说到这里提一下,每个进入标准的提案都会经历一下几个阶段

  • Stage 0 - Strawman(展示阶段)
  • Stage 1 - Proposal(征求意见阶段)
  • Stage 2 - Draft(草案阶段)
  • Stage 3 - Candidate(候选人阶段)
  • Stage 4 - Finished(定案阶段)

babel按阶段出了es7的几个预设

  • stage-0
  • stage-1
  • stage-2
  • stage-3

大家可以按需要安装,前一个会自动包含后一个,也就是说装了stege-0会自动包含后三个的特性。

到现在为止配置均是通过改命令行执行的,其实babel支持.babelrc文件

在当前目录创建.babelrc,然后添加配置即可,比如

//.babelrc
{
  "presets": ["es2015-node4"]
}

这里的配置支持整个http://babeljs.io/docs/usage/options/选项

如果你是全局安装的babel-cli,你会拥有一个babel-node cli,它会编译自动编译你的es6代码在执行之前,说到这官方还提供了一个在线版 http://babeljs.io/repl/ 可以在这写一些例子看

Require hook

install

npm install --save babel-register

node文件入口引入 require("babel-register")

它会把hook挂到require上,自动编译后面require的文件

这里可能会需要polyfill,默认是没有包含的,如果需要

npm install --save babel-polyfill

放到入口顶部 require("babel-polyfill")

polyfill后续应该不太需要了,缺什么安装相应插件就好了。

最后推荐学学es6

http://babeljs.io/docs/learn-es2015/

http://es6.ruanyifeng.com/

http://kangax.github.io/compat-table/es6/

使用es6还是能很大程度上提高工作效率的~

本文链接:https://gmiam.com/post/wan-zhuan-babel.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。