es6 转化json es6文件怎么转换

转载

半夜未央好 2024-07-05 18:10:51

文章标签 es6 转化json javascript json ViewUI gulp 文章分类 架构后端开发

　公司里很多同事在用ES6实现业务逻辑了，我也想试试。在公司的项目里，我写的ES6只要打开命令窗输入gulp watch 就自动将ES6转成ES5并放在相应的文件夹里了。我回家也想练习，但又不知道该怎么转，用在线的babel我就只能每写一个文件都要上去手动转换一次，不高兴这样做。所以我就想自己搭建一个公司项目那样的环境，几番查阅对比，终于知道用一个gulpfile配置文件就可以实现了。记录下实现历程：

一、介绍下Gulp

gulp和grunt一样是个项目构建工具。gulp的核心在于流式操作和简单的API，可以自动执行指定的任务比如编译、压缩等，方便且高效。

二、实战：安装并完成gulpfile文件

1、安装node

2、切换到工作目录，打开命令窗运行“npm init”输入参数，该目录下会生成一个package.json文件，里面包含刚刚输入的参数。（我的参数全用的默认的，没有单独修改）

3、安装gulp。命令如下， --save-dev会把安装的都写入package.json文件中。

npm install gulp --save-dev

4、安装gulp插件（目前有18个），刚开始并不知道要安装哪些插件，所以乱七八糟的看着公司项目里有的就都安上了，后来发现其实很多是用不到的。安装插件命令如下，不同插件只需修改插件名即可。

npm install gulp-babel --save-dev　　//安装babel转码插件
npm install gulp-plumber gulp-replace --save-dev　　//安装多个插件，插件间用空格分隔即可

5、新建gulpfile.js文件，gulpfile中写的就是指定gulp完成什么任务。gulp的方法有：task、watch、src和dest。

gulp.src(globs[, options]) 指定要处理的原文件路径，globs可以是字符串或者数组形式，数组表示多个文件；options一般不用传，默认是true。

gulp.src(app/js/just.try.js);　　//指定具体文件
gulp.src(app/js/*.js);　　　　　　//该app/js下的所有js文件
gulp.src(app/**/*.js);　　　　　　//app下所有文件夹中的所有js文件
！app/js/*.js　　　　　　　　　　　 //除app/js下的所有js文件外　　　　ES6写法`!${filename}`

gulp.dest(path[,options]) 文件的输出目录，可以调用多个dest将输出写入多个目录。

gulp.task(name[,deps][,fn]) 定义任务，一般传两个参数，第一个参数任务名称，第二个参数任务执行的函数。如果一个任务名是default，则这个任务是默认任务直接输入gulp就会运行，一般可以用做提示信息。

gulp.watch(globs [,opts], tasks) 监听指定文件的变化，glob同src的globs一样，tasks要执行的任务名或任务函数。

const from = './appes6/js/**/*.js';
gulp.watch(from, ['convertJS']);　　　　//convertJS执行的任务名
gulp.watch('app/js/just.try.js', function(){　　　　//直接用函数替代任务名，建议用任务名，这样可以一个任务多次调用
　　console.log('hi');
})

6、完成的gulpfile.js文件

const gulp = require('gulp');
const babel = require('gulp-babel');
const plumber = require('gulp-plumber');
const replace = require('gulp-replace');

const from = './appes6/js/**/*.js';
const to = './app/js'

// 编译
gulp.task('convertJS', function(){
  return gulp.src(from) //要编译的路径
    .pipe(plumber())  //查错
    .pipe(babel({     
      'presets': ['es2015']     //转换配置，还可以添加react等
    }))
    //babel自动添加use strict可能会引起错误，删除
    .pipe(replace(/"use strict";/, ''))
    .pipe(replace(/'use strict';/, ''))
    .pipe(gulp.dest(to))  //编译完成后的输出目录
})


// 监视文件变化，自动执行任务
gulp.task('watch', function(){
  gulp.watch(from, ['convertJS']);
})

gulp.task('start', ['convertJS', 'watch']);

7、扩充watch。上面的文件只要运行gulp watch 就可以监听文件变化了。其实watch方法监控时会触发change事件，如果我们希望在change的时候进行其他操作的话，只要写在change的回调函数中就可以。

let watcher = gulp.watch(from,['watch'])；
watcher.on('change', function(event){
    console.log('File' + event.path + 'was' + event.type + ', running tasks...')
})