Gulp4+Babel+Browserify项目配置

本地练习项目时使用到ES6模块化规范，直接访问index.html页面抛异常。于是本地搭建个简单的Gulp4项目，实现项目运行，解决模块转译问题。

gulpfile.js 文件配置

// 引入包
const gulp = require('gulp')
const babel = require('gulp-babel')
const browserify = require('browserify')
const source = require('vinyl-source-stream')
const del = require('del')
const webserver = require('gulp-webserver')

// ES6转换成ES5，将 js 文件打包到 build 文件中
const jsHandler = function() {
  return gulp
    .src('./src/js/*.js')
    .pipe(babel({
      presets: ['@babel/env']
    }))
    .pipe(gulp.dest('./build/js/'))
}
// 处理commonjs模块化规范，将 js 文件整合打包到 dist/js 文件中
const browserifyJsHandler = function() {
  let b = browserify({
    entries: './build/js/index.js'
  })
  return b.bundle()
    .pipe(source('index.js'))
    .pipe(gulp.dest('./dist/js/'))
}
// 编译html
const htmlHandler = function() {
  return gulp
    .src('./src/*.html')
    .pipe(gulp.dest('./dist/'))
}
// 清除文件
const delHandler = function() {
  return del(['./dist/'])
}
// 启动服务
const webHandler = function() {
  return gulp
    .src('./dist')
    .pipe(webserver({
      host: 'localhost',
      port: '8009',
      livereload: true,
      open: './index.html'
    }))
}
// 监控文件变化
const watchHandler = function() {
  // jsHandler 监控源代码
  gulp.watch('./src/js/*.js', jsHandler),
  // browserifyJsHandler 监控构建后的代码
  gulp.watch('./build/js/*.js', browserifyJsHandler),
  gulp.watch('./src/js/*.html', htmlHandler)
}
// gulp指令
module.exports.default = gulp.series(
  delHandler,
  gulp.parallel(
    // 同步执行，先执行 jsHandler 对文件进行编译，再执行 browserifyJsHandler
    gulp.series(jsHandler, browserifyJsHandler),
    htmlHandler
  ),
  webHandler,
  watchHandler
)

package.json 文件中devDependencies配置

{
  "devDependencies": {
    "@babel/core": "^7.17.10",
    "@babel/preset-env": "^7.17.10",
    "browserify": "^17.0.0",
    "del": "^6.0.0",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0",
    "gulp-webserver": "^0.9.1",
    "vinyl-source-stream": "^2.0.0"
  }
}

git源代码：github.com/web-ljc/vue…