Gulp + Babel 将es6代码转为es5-附上简单例子

直接附上解决的方法:

1.在对应的目录安装:

如果没有安装gulp,先安装gulp

//全局安装gulp
npm install -g gulp
//项目中安装gulp
npm install --save-dev gulp

 如果已经安装gulp,可无视上面直接安装下面.

npm install gulp-babel --save-dev
npm install @babel/core@^7.0.0 --save-dev
npm install babel-preset-env --save-dev

 2.在项目目录新建文件

.babelrc 

{
  "presets": ["env"]
}

 3.如果没有gulpfile.js,新建这个文件,复制下面的代码:

// 获取 gulp
var gulp = require('gulp');
// 获取babel模块
var babel = require('gulp-babel');

/*这里的babal是任务名,可以修改为其他turn ,change 都行,执行的时候在命令行输入 gulp turn 或者 gulp change就行了*/
gulp.task("babel", function () {
  return gulp.src("./src/*.js")// ES6 源码存放的路径
    .pipe(babel()) 
    .pipe(gulp.dest("dist")); //转换成 ES5 存放的路径
});

 4.在命令行输入 gulp babel 就能将es6转成es5啦

 

下面是例子:

一.例子的目录:

package.json 的内容

.babelrc 文件的内容

src中 test.js的内容:(使用了es6的箭头函数)

命令行输入:

最后在dist目录输出test.js,内容如下: 

最后为新手们再提一下:

package.json 怎么出现的鸭,为什么我没有node_modules这个目录的呢?是自己创建的吗?

要先安装node.js,安装完之后在demo的目录里输入npm init 看不到没关系,无脑回车就好了