涨知识|Gulp + Babel实现es6向es5转码

Posted 2021-04-08 算法与编程之美

问题描述

为什么需要对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转码了。

END

主  编   |   张祯悦

责  编   |   冯   博

 where2go 团队

---

   

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！