grunt集成Babel 实现ES6转ES5

grunt集成Babel 实现ES6转ES5

背景：原来前端项目使用ES5开发，后来有个小伙伴使用了ES6的高级语言，导致项目无法通过grunt压缩。

使用grunt 集成babel，实现ES6转ES5，主要有一下几个步骤：

1. 配置package.json

devDependencies里面是开发依赖，dependencies里面是项目依赖。

"devDependencies": {
     
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "grunt": "^1.1.0",
    "grunt-babel": "^7.0.0",
    "grunt-contrib-copy": "^1.0.0",
    "grunt-contrib-cssmin": "^2.2.1",
    "grunt-contrib-jshint": "^1.1.0",
    "grunt-contrib-uglify": "^3.3.0"
  },
  "dependencies": {
     
    "grunt-cli": "^1.3.2",
    "webpack": "^3.12.0"
  }

2.下载项目依赖

进入Gruntfiles.js的同级目录，打开控制命令窗口，执行

npm install  grunt-cli
npm install grunt
npm install webpack -g

3.配置Gruntfiles.js

grunt.initConfig({
     
        pkg: grunt.file.readJSON('package.json'),
        uglify : {
     
            my_target: {
     
                files: [{
     
                    expand: true,
                    src: [
                        'scripts/apps/*.js'
                    ],
                    dest: '', //输出目录
                    cwd: '../webapp' //给文件设置一个起点(gruntfiles的相对路径)
                }]
            }
        },
        
        babel: {
     
            options: {
     
                presets: ['babel-preset-es2015']
            },
            dist: {
     
                files: [{
     
                    expand: true,
                    src: [
                        'scripts/apps/*.js'
                    ],
                    dest: '',
                    cwd: 'src'
                }]
            }
        }
    });
     // 加载 "uglify" 任务的插件。
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-babel');

    // 默认被执行的任务列表。
    grunt.registerTask('default', ['babel','uglify']);

4.打开控制命令窗口执行grunt

大功告成啦！

需要注意的是，由于原来项目代码是ES5和ES6混用的状态，所有有部分代码是不符合ES6的标准的。Babel将ES6的语法转化成ES5，会给每一个文件加上“use strict”，导致原来部分使用ES5的代码暴露在严格模式下，这在转化或者运行时会报错。

本人在转化和运行时就遇到了两个错误。一个是声明了一个变量叫interface，但interface是ES6的保留字，导致转化时报错，这个问题到文件里去把变量名改掉就行。

第二个问题是，变量没有声明就直接引用。这个问题在编译时不会报错，但是在严格模式下会导致项目运行不正常，比如下面的c_start和c_end。解决办法是给变量加上声明。
所以总的来说，还是要统一代码的语法标准，养成良好的编码习惯，不然bug远源源不断。