问题解决 我成功地使用 Browserify + Gulp + Babelify + React 前端部署

Posted by Bibooo on 08-01,2022
我不喜欢使用 脚手架 来构建我的 react 项目。
react 脚手架我记得内置的好像是 webpack 如果要修改的话,还要输入命令什么的,我本来就对 webpack 不了解,也不喜欢用,基础配置信息我倒行,我属实对 webpack 不感兴趣,我不喜欢使用 npm 来管理我的项目。虽然脚手架很方便,我觉得学习不能走捷径。
我目前也没有大型项目需要我打包管理构建什么的,我实践也不利于我学习,光敲个命令对我没什么好处,我还懒的记。

browserify

  1. Browserify 可以让我们在浏览器端使用 像 node一样的 require,export,也可以使用 npm 中的模组。

gulp

  1. gulp 是一个前端任务工具自动化工具,它可以帮我们打包,转义,自动的。

babelify

  1. 使用 browserify 进行 babel 转义的工具,React 的 jsx 或 ES6 语法转成 ES5
    const gulp = require('gulp');
    const uglify = require('gulp-uglify');
    const htmlreplace = require('gulp-html-replace');
    const source = require('vinyl-source-stream');
    const browserify = require('browserify');
    const watchify = require('watchify');
    const babel = require('babelify');
    const streamify = require('gulp-streamify');
    const { parallel } = require('gulp');
    // 位置参数
    const path = {
      HTML: 'index.html',
      MINIFIED_OUT: 'bundle.min.js',
      OUT: 'bundle.js',
      DEST: 'dist',
      DEST_BUILD: 'dist/build',
      DEST_SRC: 'dist/src',
      ENTRY_POINT: './app/index.js'
    };
    // 复制 html 到 dist
    function copy(){
      gulp.src(path.HTML)
         .pipe(gulp.dest(path.DEST))
    }
   
    // 监听 HTML 是否变化 是复制到 dist
    function watch(){
      gulp.watch(path.HTML,copy);
      var watcher  = watchify(browserify({
        entries: [path.ENTRY_POINT],
        transform: [babel],
        debug: true,
      }));
    return watcher.on('update', function () {
        watcher.bundle()
          .pipe(source(path.OUT))
          .pipe(gulp.dest(path.DEST_SRC))
          console.log('Updated');
      })
        .bundle()
        .pipe(source(path.OUT))
        .pipe(gulp.dest(path.DEST_SRC));
    }
    
    // 执行 production 转义
    function Copys(){
      browserify({
        entries: [path.ENTRY_POINT],
        transform: [babel],
      })
        .bundle()
        .pipe(source(path.MINIFIED_OUT))
        .pipe(streamify(uglify(path.MINIFIED_OUT)))
        .pipe(gulp.dest(path.DEST_BUILD));
    }
    // dist script 引用替换
    function replaceHTML(){
      gulp.src(path.HTML)
      .pipe(htmlreplace({
        'js': 'build/' + path.MINIFIED_OUT
      }))
      .pipe(gulp.dest(path.DEST));
    }
  // 执行 gulp 会执行 gulp default 的任務:copy,watch。若跑 gulp production,則會執行 Copys,replaceHTML
   const build = parallel(copy,watch);
   const production = parallel(Copys,replaceHTML);

   exports.default = build;
   exports.production = production;
   

目前 index.html 可以自动转化,但是 JSX 需要手动,这是我很烦的地方,我本来是想百度找一篇转化的,因为 gulp 4.0.1 版本 代码都没有,只有 3版本的,我刚开始降级,然后 node 又不兼容,这就是 npm,node 的问题,版本兼容太烦了,就跟 scss 一样,往往很多时间就花在这些上面了。于是我放弃了,我开始看 gulp 文档,基本功能还是有了,以后会随着需要出新的配置。