使用gulp+browserify+babelify-css+babelify构建轻量级react开发环境

使用gulp+browserify+babelify-css+babelify构建轻量级react开发环境

---

导读

在react项目开发脚手架选型中，一般大多数情况都会选择create-react-app这款流行的脚手架工具，
但是针对一些比较小的项目，个人建议还是动手搭建建一个小型且轻量的构建工具自用比较合适，下面我们使用gulp，
配合browserify，搭建react开发的环境

项目地址：https://github.com/RiversCoder/gulp-react-project

使用的技术栈

• gulp4.x
• gulp-load-plugins 自动加载gulp-开头的插件
• browserify 打包构建模块工具，只能构建js
• browserify-css 使browserify打包构建
• babelify babel编译es6，react
• vinyl-source-stream 把browserify打包好的内容转换成gulp读取的流
• babel-preset-es2015 babel预设，编译es6
• babel-preset-react babel预设，编译react

安装项目依赖

{
  "name": "gulp-react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-plugin-transform-remove-strict-mode": "^0.0.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babelify": "^8.0.0",
    "browserify": "^16.2.3",
    "browserify-css": "^0.15.0",
    "gulp": "^4.0.2",
    "gulp-clean": "^0.4.0",
    "gulp-concat": "^2.6.1",
    "gulp-connect": "^5.7.0",
    "gulp-load-plugins": "^2.0.0",
    "gulp-uglify": "^3.0.2",
    "vinyl-source-stream": "^2.0.0"
  },
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  }
}

项目目录结构

D:.
|   .babelrc
|   .gitignore
|   gulpfile.js
|   package.json
|
+---dist
|
\---src
    |   index.html
    |
    +---css
    |       style.css
    |
    \---script
            Child.js
            Parent.js
            index.js

gulpfile.js 配置文件

实现的功能有：修改react文件后，自动构建，编译，刷新浏览器

let gulp = require('gulp');
let gulpLoadPlugins = require('gulp-load-plugins');
let browserify = require('browserify');
let babelify = require('babelify');
// let babel = require('gulp-babel')
let browserifyCss = require('browserify-css');
let source = require('vinyl-source-stream');
let $ = gulpLoadPlugins({ lazyload: true, rename: {} });


// 汇总当前输入输出的文件路径
const path = {
    entry:{
        all: ['src/index.html','src/css/*.css','src/script/*.js'],
        css: ['src/css/*.css'],
        js: ['src/script/*.js'],
        allJs: ['src/script/index.js'],
        html: ['src/index.html']
    },
    output:{
        all: ['dist/index.html','dist/css/','dist/script/'],
        html: ['dist/'],
        css: ['dist/css/'],
        js: ['dist/script/']
    }
}

// 编译react jsx es6语法
const browserifyJs = (done) =>{
    return browserify({
        entries: path.entry.allJs,
        debug: true,
        transform: [ babelify.configure({
          presets: ['es2015','react']
        }), ]
    }).transform(browserifyCss, {
        autoInject: true,
        autoInjectOptions:{
            verbose: true,
            insertAt: 'top',
        },
        minify: true,
        // output: './dist/css/bundle.min.css'
    }).bundle()
    .pipe(source("bundle.min.js"))
    .pipe(gulp.dest(path.output.js))
    .pipe($.connect.reload())
}


// 拷贝html文件
const copyHtml = (done) => {
    return gulp.src(path.entry.html)
        .pipe(gulp.dest(path.output.html))
        .pipe($.connect.reload())
}

// 合并拷贝css文件
const outputStyle = (done) => {
    return gulp.src(path.entry.css)
        .pipe($.concat('style.css'))
        .pipe(gulp.dest(path.output.css))
        .pipe($.connect.reload())
}

// 清理文件
const clear = (done) => {
    try{
        return gulp.src(path.output.all)
        .pipe($.clean())
    }catch(e){
        done()
    }
}

// 监听文件修改启动服务
const watchEdit = (done) => {
    // 启动服务
    $.connect.server({
        name: 'Gulp React',
        root: 'dist',
        port: 8008,
        livereload: true
    });

    // 分别对文件进行监听
    gulp.watch(path.entry.js, gulp.parallel(browserifyJs));
    gulp.watch(path.entry.css, gulp.parallel(outputStyle, browserifyJs));
    gulp.watch(path.entry.html, gulp.parallel(copyHtml));
    done()
}

exports.default = gulp.series( clear, copyHtml, outputStyle, browserifyJs, watchEdit)

执行打包输出结果

D:\me\gulp\gulp-react  ([email protected])
λ npx gulp
[15:23:51] Using gulpfile D:\me\gulp\gulp-react\gulpfile.js
[15:23:51] Starting 'default'...
[15:23:51] Starting 'clear'...
[15:23:52] Finished 'clear' after 120 ms
[15:23:52] Starting 'copyHtml'...
[15:23:52] Finished 'copyHtml' after 326 ms
[15:23:52] Starting 'outputStyle'...
[15:23:52] Finished 'outputStyle' after 39 ms
[15:23:52] Starting 'browserifyJs'...
[15:23:54] Finished 'browserifyJs' after 2.38 s
[15:23:54] Starting 'watchEdit'...
[15:23:54] Starting server...
[15:23:54] Finished 'watchEdit' after 106 ms
[15:23:54] Finished 'default' after 2.98 s
[15:23:54] Gulp React started http://localhost:8008
[15:23:54] LiveReload started on port 35729
[15:23:54] Running server

采坑

一定注意babel的版本，以及babelify的版本是否匹配，而且不要忘记babel-core的安装，以及本地文件.babelrc文件的创建，这些都是大坑

参考资料

1. Basic react gulpfile with browserfy and babel
2. Working gulpfile.js with gulp-babel ES6 and React
3. gulp-react过时的取代方案
4. My Gulpfile using ES6 (Babel), Browserify, BrowserSync, SASS, Sourcemaps, and more… 参考价值高
5. Browserify 使用指南
6. 文章 https://snippets.aktagon.com/snippets/734-a-gulp-js-template-for-react-js-and-es6-projects