为什么需要对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就行了 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转码了。 主 编 | 张祯悦 责 编 | 冯 博
|