涨知识|Gulp + Babel实现es6向es5转码
问题描述
为什么需要对es6代码进行转码？是因为部分浏览器无法识别es6语法，在gulp中ugilfy也无法压缩es6，如果有es6的代码，就会压缩失败，所以要将es6转化为老一版的es5，才更加方便。
解决方案
1.安装gulp和插件
首先需要安装gulp
//全局安装gulpnpm install -g gulp//项目中安装gulpnpm install --save-dev gulp |
|---|
然后安装babel相关的插件
npm install gulp-babel --save-devnpm install @babel/core@^7.0.0 --save-devnpm install babel-preset-env --save-dev |
|---|
2.新建.babelrc文件
在对应的项目目录下新建.babelrc文件，里面主要有两个属性presets和plugins，对应的内容如下：
{ "presets": [ // 需要用到的套件 ], "plugins": [ // 需要用到的插件 ]} |
|---|
因为这里是es6向es5的转码，所以只指定presets就行了
{ "presets": ["env"]} |
|---|
3.新建gulpfile.js文件
// 获取 gulpvar 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转码了。
END
主 编 | 张祯悦
责 编 | 冯 博
where2go 团队
腾讯云开发者
