这是我参与更文挑战的第20天，活动详情查看： 更文挑战
前言
在上一篇文章 gulp 的使用（六）：利用 webpack 流实现模块化 里，介绍了如何使用 webpack-stream 解决 gulp 不能自身不能处理模块化的问题。
在这一篇文章里，将介绍如何去使用 babel 转译 es6+ 代码。
使用 babel
在现在的项目里，由于有 webpack 的集成，所以有两种方式可以使用 babel 来转译 js，一种是使用 webpack 的 babel-loader，另一种是使用 gulp 的插件 gulp-babel。如果确定项目要用到 webpack，建议使用 babel-loader，否则使用 gulp-babel。
方法1：webpack 的 babel-loader
在我写的 webpack5 系列文章 “webpack5 的使用（五）：babel 转译 js 代码” 里就已经很详细说明如何在 webpack 里使用 babel 了，因此这里不做详细的描述，仅简单说明。
安装 babel-loader 以及需要用到的 babel 插件
npm i -D babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/runtime
webpack.config.js 配置
console.log('利用了 webpack ！！！')
const path = require('path')
module.exports = {
mode: 'development',
devtool: 'eval-cheap-module-source-map',
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-object-rest-spread',
'@babel/plugin-transform-runtime'],
cacheDirectory: true,
}
}
}
]
},
resolve: {
alias: {
}
},
}
方法2：gulp 的 gulp-babel
我们先安装 gulp-babel 和 babel 的相关插件。
npm install -D gulp-babel @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/runtime
在 gulpfile.js 配置 gulp-babel，并且配置上 @babel/preset-env 和 @babel/plugin-transform-runtime，记得 babel 的处理要优先于 webpack 的处理。
const babel = require('gulp-babel')
function js() {
return src(['src/js/**/*.js'])
.pipe(changed('dist/js/**/'))
.pipe(babel({
presets: ['@babel/env'],
plugins: ['@babel/transform-runtime']
}))
.pipe(named(function (file) {
return file.relative.slice(0, -path.extname(file.path).length)
}))
.pipe(webpack(webpackConfig))
.pipe(plumber())
.pipe(uglify())
.pipe(dest('dist/js'))
}
在这个项目里将采用第一种方法：babel-loader 来转译 js 代码。
完整项目
2021.8.30，我重新整理了一遍项目，已放到 gitee 上，大家可以 clone 下来直接用，代码的提交记录顺序和我这个系列文章教程顺序是一致的，大家看到哪一篇文章时，就回滚代码到哪一个版本，这样看项目代码会更直观。
gitee 库链接：gitee.com/only1zhuo/g…
