涨知识|Gulp + Babel实现es6向es5转码
问题描述
为什么需要对es6代码进行转码？是因为部分浏览器无法识别es6语法，在gulp中ugilfy也无法压缩es6，如果有es6的代码，就会压缩失败，所以要将es6转化为老一版的es5，才更加方便。
解决方案
1.安装gulp和插件
首先需要安装gulp
//全局安装gulp npm install -g gulp //项目中安装gulp npm install --save-dev gulp |
然后安装babel相关的插件
npm install gulp-babel --save-dev npm install @babel/core@^7.0.0 --save-dev npm install babel-preset-env --save-dev |
2.新建.babelrc文件
在对应的项目目录下新建.babelrc文件，里面主要有两个属性presets和plugins，对应的内容如下：
{ "presets": [ // 需要用到的套件 ], "plugins": [ // 需要用到的插件 ] } |
因为这里是es6向es5的转码，所以只指定presets就行了
{ "presets": ["env"] } |
3.新建gulpfile.js文件
// 获取 gulp var gulp = require('gulp'); // 获取babel模块 var babel = require('gulp-babel'); gulp.task("babel", function () { return gulp.src("./src/*.js")// es6 源码存放的路径 .pipe(babel()) //执行转码 .pipe(gulp.dest("dist")); // 转换成 es5 存放的路径 }); |
这样就可以实现es6向es5转码了。
主 编 | 张祯悦
责 编 | 冯 博
where2go 团队
温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！