使用Grunt+Babel进行ES6开发

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

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

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

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

{
  "name": "Wikiplus",
  "version": "0.1.0",
  "description": "A front-end jQuery-based Mediawiki plugin.",
  "license": "Apache",
  "devDependencies": {
    "grunt": "~0.4.1", //grunt本体
    "grunt-babel": "^5.0.3",
    "grunt-contrib-uglify": "~0.2.1", //js压缩用的
    "grunt-contrib-watch": "^0.6.1", //grunt监视文件变动的
    "load-grunt-tasks": "^3.3.0" //grunt任务载入用的
  }
}

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

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

我的大概长这样

module.exports = function (grunt) {
    require('load-grunt-tasks')(grunt);
    grunt.initConfig({
        uglify: {
            options: {
            },
            app_task: {
                files: {
                    './Main.min.js': './Main.js'
                }
            }
        },
        babel: {
            options: {
                sourceMap: true
            },
            dist: {
                files: {
                    './Main.js': './Main.new.js'
                }
            }
        },
        watch: {
            another: {
                files: ['./Main.new.js'],
                tasks: ['babel','uglify'], // 先babel翻译，再压缩
                options: {
                    // Start another live reload server on port 1337
                    livereload: 1337
                }
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default', ['watch']); //定义默认执行的任务
}

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

 

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

{
	"compilerOptions": {
		"target": "ES6"
	},
	"files": [
		"Main.new.js"
	]
}

来避免对ES6的报错。