解决方案:按照以下的步骤进行安装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. 执行终端命令,右键点击当前的文件夹选择 -> 新建位于文件夹位置的终端窗口;

gulp的ES6转换报错 Cannot find module 'babel-core'

5. 在终端输入gulp命令

    gulp default

6. 命令执行成功后,再次打开编辑器,在dist文件夹下自动生成一个你刚才命名的文件夹的js文件,这个文件就是你code文件夹

中的es6语法转发的es5文件。


相关文章: