非webpack、cli环境下，babel解析es6代码转为es5，以及grunt中配置babel

非webpack、cli环境下，babel解析es6代码转为es5

在非webpack、cli环境下，引入es6代码，如果不注意直接发布生产，在部分低版本浏览器（IE）或手机（如iphone6P系统版本ios10以下的）会报错。这时，需要通过babel解析，将es6代码转为es5才可以正常运行。
第一步
新建目录，命令行输入npm init 对项目进行初始化，生成package.json配置文件
第二步
在根目录下新建一个用于babel编译.babelrc文件

{
  "presets": [
  	"es2015"
  ],
  "plugins": []
}

第三步
安装ES2015转码规则

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

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

第四步
生成编译后的js文件
这儿需要指定生成的js文件，不然会在命令行里打印出来

babel es6.js -o es5.js

注意
babel编译后的js为严格模式，代码不规范浏览器编译会报错，删除文件开头的’use strict’;即可。

grunt中配置babel

下载相关插件

npm install grunt-babel --save-dev
npm install babel-preset-es2015 --save-dev
npm install babel-plugin-transform-remove-strict-mode --save-dev

Gruntfile.js中配置
配置

babel: {
    options: {
        sourceMap: false,
        presets: ['babel-preset-es2015']
    },
    dist: {
        files: [{
            expand : true,
			cwd : './js',//js目录下
			src : [ '**/*.js'],//所有js文件
			dest : 'build/sit/zyb/js' //输出到此目录下
        }]
    }
}

加载插件

grunt.loadNpmTasks('grunt-babel');

加入任务列表

grunt.registerTask('default', [ 'babel' ]);

在根目录加入.babelrc文件，告知babel解析为es2015格式，并清除编译完成之后文件顶部的use strict。

{
  presets: [
      [ "es2015", { "modules": false } ]
  ],
  "plugins": ["transform-remove-strict-mode"]
}