前言
今天在公司使用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命令就好了
