This is the 20th day of my participation in the Genwen Challenge

preface

In my previous article, Gulp (vi) : Modularity with WebPack Streams, I showed you how to use Webpack-Stream to solve the problem that GULp cannot handle modularity on its own.

In this article, you’ll learn how to use Babel to translate ES6 + code.

The use of Babel

In the current project, due to webpack integration, there are two ways to translate JS using Babel, one using WebPack’s babel-loader, and the other using gulp’s gulp-babel plug-in. Babel-loader is recommended if the project is determined to use Webpack, and gulp-babel is recommended otherwise.

Method 1: Babel-loader for Webpack

I explained how to use Babel in WebPack in great detail in my webPack 5 series, “Use WebPack 5: Babel translation JS Code,” so I won’t go into the details here, just a brief explanation.

Install babel-loader and any Babel plug-ins you need

npm i -D babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/runtime
Copy the code

Webpack. Config. Js configuration

console.log('Take advantage of 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: {}},}Copy the code

Method 2: Gulp-babel of gulp

Let’s start by installing gulp-babel and Babel plug-ins.

npm install -D gulp-babel @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/runtime
Copy the code

Configure gulp-babel in gulpfile.js and set @babel/preset-env and @babel/ plugin-transform-Runtime, remember that Babel takes precedence over 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'))}Copy the code

The first method will be used in this project: babel-loader to translate JS code.

Complete the project

On August 30, 2021, I reorganized the project and put it on Gitee. You can clone it and use it directly. The code submission record sequence is consistent with the sequence of my series of articles.

Gitee Library link: gitee.com/only1zhuo/g…

“The Use of GULP” series

  • Use of GULP (1) : Start (juejin. Cn)
  • Using gulp (2) : HTML (juejin. Cn)
  • Using gulp (3) : processing js (juejin. Cn)
  • Using gulp (4) : Handling CSS (juejin.cn)
  • Use of gulp (5) : processing images (juejin. Cn)
  • Use of Gulp (6) : Using Webpack stream modularization (juejin. Cn)
  • Using gulp (7) : Using Babel to translate JS (juejin.cn)
  • Use of GULP (8) : Separation environment (juejin. Cn)