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在项目目录安装babelnpm install  gulp-babel  在项目目录安装babel-presetnpm 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文件路径  });