es6转es5

es6转化成es5

一，webpack方法

需要安装的包

全局安装webpack（也可以在项目目录安装）
npm install webpack -g

在项目目录安装所需要的包
npm install babel-loader babel-core babel-preset-es2015

在根目录新建一个webpack.config.js文件

配置
module.exports = {
    entry : './es6.js',//入口，写需要编译文件的路径
    output : {         
        path : __dirname,    //要导出文件的地方 path写绝对路径，
        filename : "es5.js"   //编译后的文件名
    },
    module : {
        loaders : [{
            test : /\.js$/,
            loader : 'babel-loader'   //使用babel-loader加载器
        }]
    }
}

在根目录新建一个.babelrc文件

添加参数
{'presets':['es2015']}

或者也可以将上面两步合并成一步

module.exports = {
    entry : './es6.js',
    output : {
        path : __dirname,
        filename : "es5.js"
    },
    module : {
        loaders : [{
            test : /\.js$/,
            //在babel-loader加载器后面接参数，就不用再建一个.babelrc文件了。
            loader : 'babel-loader?presets[]=es2015
        }]
    }
}

二，gulp方法

需要安装的包

全局安装gulp(也可以在项目目录安装)
npm install gulp -g

在项目目录安装babel
npm install  gulp-babel  

在项目目录安装babel-preset
npm install babel-preset-es2015  

在根目录新建一个gulpfile.js文件

配置
//引包
var gulp = require("gulp");   
var babel = require("gulp-babel");  

//新建任务
gulp.task("default", function () {  
    return gulp.src("js/*.js")// 导入es6文件路径  
        .pipe(babel())  
        .pipe(gulp.dest("dist")); //导出es5文件路径  
});  

在根目录新建一个.babelrc文件

添加参数
{'presets':['es2015']}

或者也可以将上面两步合并成一步

配置
//引包
var gulp = require("gulp");   
var babel = require("gulp-babel");  

//新建任务
gulp.task("default", function () {  
    return gulp.src("js/*.js")// 导入es6文件路径  
        .pipe(babel({
            presets: ['es2015']
        }))  
        .pipe(gulp.dest("dist")); //导出es5文件路径  
});