解决方案:按照以下的步骤进行安装gulp-babel
一、安装全局的gulp及一系列工具包
电脑终端执行命令:
1. npm install -g gulp
2. npm install gulp --save-dev;
3. npm install gulp-babel --save-dev;
// babel-preset-env插件,该插件可以根据配置的目标运行环境自动启用需要的babel插件(动态转化es6代码为可执行的es5的代码)
4. npm install babel-preset-env --save-dev;
5. npm install babel-core --save-dev;(根本问题,根据babel指引不需要这个,但是实际少了会报错,加上就没事了)
二、文件的配置及转码过程
1. 新建项目,在项目的根目录下创建一个文件名为“.babelrc”的配置文件
输入代码:{
"presets":["es2015"]
}
2. 在项目的根目录下再创建一个名为".gulpfile.js"文件,在文件内输入转码配置:
//引入gulp
var gulp = require("gulp");
//引入gulp-babel
var babel = require("gulp-babel");
//设置gulp命令
gulp.task("default",function(){
//需要转码的es6文件,code文件夹下的任何一个后缀名为.js的文件,code文件夹需要手动创建
return gulp.src("code/*.js")
//启用babel
.pipe(babel())
//经过转码的es5文件存放的位置,只需要将dist文件夹手动创建在项目的目录中,这个路径可以更改,经过转码
的ES5文件会自动根据code下的js文件的名称生成
.pipe(gulp.dest("dist"));
});
3. 新建一个JS文件,输入es6代码
eg: let a = 1;
var fn = () =>{
console.log("a");
};
fn();
4. 执行终端命令,右键点击当前的文件夹选择 -> 新建位于文件夹位置的终端窗口;
5. 在终端输入gulp命令
gulp default
6. 命令执行成功后,再次打开编辑器,在dist文件夹下自动生成一个你刚才命名的文件夹的js文件,这个文件就是你code文件夹
中的es6语法转发的es5文件。