babel
babel 主要是用来编译 ES5 以上的 JavaScript 新特性,可以把 ES6 编译成 ES5 或 ES3 的语法,可以在 IE9, IE8 等低版本的浏览器流畅运行。
- babel 的插件
babel-preset-es2015
babel-core
babel-preset-es2015 (babeljs) 编译 JavaScript 的特性是有范围的
这两个依赖是一定需要
- .babelrc
还有增加 .babelrc 这个文件
// .babelrc
{
"presets": ["es2015"]
}
gulp
gulp 的底层是用 nodejs 实现的,gulp 处理文件的方式也是通过 stream 的方式,擅长处理集联任务,官方文档就说他就是增强工作流的一个工具。gulp 通过 stream 的传输文件,配合插件处理文件,实现任务自动化的方式来增强工作流程
api:
- gulp.src
- gulp.dest
- gulp.watch
- gulp.task
gulp.src 代表需要处理的文件
gulp.dest 代表需要把处理好的文件转移到指定的位置
gulp.watch 代表需要监听的文件的变化
gulp.task 代表我们创建的任务
gulp babel 实战
使用 es6 写 gulp,
在 gulp 中是使用 gulp-babel 来处理 我们的 JavaScript 文件
需要的依赖
npm i gulp gulp-babel babel-preset-es2015 babel-core --save-dev
- gulpfile.babel.js 替换 gulpfile.js
// gulpfile.babel.js
import gulp from 'gulp'
import babel from 'gulp-babel'
gulp.task('babel', () => {
gulp.src('src/main.js')
.pipe(babel())
.pipe(gulp.dest('dist'))
})
gulp.task('html', () => {
gulp.src('src/index.html')
.pipe(gulp.dest('dist'))
})
gulp.task('default', ['html', 'babel'])
在终端中输入 gulp 就会执行 html babel 两个任务处理对应的文件
参考:
babel:https://babeljs.cn
gulp:https://gulpjs.com/