使用Grunt+Babel进行ES6开发

最近打算重构一下Wikiplus(虽然应该会在高考后进行),又一直对ES6的某些语法……比如Class这种甜甜的语法糖……垂涎已久,于是今天就构建了一下环境。

首先,必须准备Node.js环境,Grunt也是基于Node.js的。Babel也需要通过Node.js的包管理器npm来安装。

如何安装Node.js不讲了,这里有个小点,如果在墙内使用npm有困难,可以用淘宝提供的cnpm镜像。

首先在项目目录建立npm用的package.json,我的大概是这样的

然后在这个目录执行npm install,npm就会帮你装好所有需要的包。

然后在这个目录建立Gruntfile.js,来定义grunt的行为。

我的大概长这样

然后执行grunt就行了……grunt就可以监视你的文件变动,每当我保存Main.new.js的时候,会把它用Babel转译存到Main.js,再用uglifyJS压缩存到Main.min.js。工作量一下子就小了好多!再也不用手工执行这个那个了……好棒>.<

 

顺便我最近已经抛弃了Sublime改用Visual Studio Code。感觉VSC更厉害也更好用一些。不过VSC对ES6默认是会划红线的,需要在文件夹下建立一个jsconfig.json,内容如下

来避免对ES6的报错。

 

“使用Grunt+Babel进行ES6开发”的4个回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注