gulp的ES6转换问题Cannot find module '@babel/core'

遇到的坑:

gulp的ES6转换问题Cannot find module ‘@babel/core’折腾了我2个多小时,苦得一逼,基本找不到可行的方案

解决方案:严格按照我一下的路线进行安装gulp-babel

步骤一、创建工程目录

Project-demo/

|── dist/

├── src/
├── js/
└── index.js

步骤二、安装gulp和编译ES6所需要的模块

用cd命令进入myProject,分别执行:

1. npm install gulp —save-dev;
2. npm install gulp-babel —save-dev;

 // babel-preset-env插件,该插件可以根据配置的目标运行环境自动启用需要的babel插件(即动态转换ES6代码至可执行的JS代码)
3. npm install babel-preset-env —save-dev;

// 根据babel文档指引是不需要babel-core的,但是在实际操作中少了babel-core会报找不到该模块,所以安装上即可
4. npm install babel-core —save-dev; (根本问题所在)


—— 安装ok的话,可以看到根目录下的package.json文件。
步骤三、构建Gulp任务
在Project-demo目录下新建2个文件:gulpfile.js 和.babelrc(注意开头有个.)文件。

说明:

    gulp的在运行时会在项目目录下寻找gulpfile.js文件,找不到会报错

     同理,babel编译ES6也会相应去找项目目录下寻找.babelrc文件,找不到同样会报错。
在gulpfile.js的内容如下:
var gulp = require('gulp');
var babel = require('gulp-babel');

 // 注册任务
gulp.task('es6', function(){
    return gulp.src('src/js/*.js')
        //将ES6代码转译为可执行的JS代码
        .pipe(babel())
         .pipe(gulp.dest('dist/static/scripts'))
})

gulp.task('default', ['es6']);
.babelrc的内容如下:

{
“presets”: [“env”]
}

index.js内容:
function foo(num1, num2) {
    let num3 = 0;       // let是ES6的语法
    num3 = num1 + num2;
    return num3;
}
步骤四
最后,cd命令进入Project-demo目录,执行gulp命令,会生成一个dist目录,里面会有一个编译好的JS文件(该文件是ES5语法的)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值