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

解决方案:按照以下的步骤进行安装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文件。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值