解决gulp使用gulp-babel时Cannot find module '@babel/core'问题

前言

今天在公司使用gulp打包项目时候报错，显示使用了es6语法，于是安装babel-core，结果一直显示Cannot find module '@babel/core'，百度了好几篇文章都不生效，最后发现是因为目前npm上的babel最新的版本只有7.0.1但是安装的版本是8.0的版本这样会报找不到babel-core的错误，下面说一下具体的安装步骤：

1.安装es6转es5所需要的包

// babel 依赖的包 但是看babel官方说并没有依赖这个如果不安装会报错
npm install babel-core --save-dev
// 转码所需要的模板
npm install babel-preset-env --save-dev
// babel转码的核心包这里安装7的版本如果不写默认安装8.0.0的版本
//但是在npm上看到的是最新版本是7的 如果安装了8的版本会一直报找不到babel-core的错误
npm install gulp-babel@7 babel-core --save-dev
// 用非严禁模式编译
npm install babel-plugin-transform-remove-strict-mode --save-dev

2.在根目录下面创建一个.babelrc文件这个文件是babel的配置文件 就是和gulpfile.js同级的文件夹下面,写这个内容

{
    "presets": [
      [ "env",
        { "modules": false }
      ]
    ],
    "plugins": ["transform-remove-strict-mode"]
  }

3.在gulpfile.js里面引入babel

const babel = require('gulp-babel')

4.转码js

gulp.task('js', function() {  
  return gulp.src('src/js/**/*.js')
    // .pipe(jshint('.jshintrc'))
    // .pipe(jshint.reporter('default'))
    .pipe(babel())
    .pipe(uglify())   //here加入es6转码
    .on('error', function (err) {
      gutil.log(gutil.colors.red('[Error]'), err.toString());
     })
    .pipe(replace('http://bk.autostreetscdn.com/'+pkg.appname+'/src/','http://bk.autostreetscdn.com/'+pkg.appname+'/build/'+pkg.version+'/'))
    .pipe(header(headerinfo, { pkg : pkg }))
 
    .pipe(gulp.dest('build/'+pkg.version+'/js'))
    .pipe(notify({ message: 'Scripts task complete' }))
    .pipe(livereload());
});

5.执行gulp命令就好了