gulp構建react項目十：根據不一樣環境進行構建，配置eslint、sourcemap

背景
在項目工程化中，一般根據不一樣的環境對項目進行構建，通常環境主要有開發、測試、預生產、生產。開發環境下關注規範、測試，而其餘環境主要關注性能、安全，好比開發環境下進行eslint檢查，而其餘環境不作eslint檢查。

項目相關依賴

cnpm i -D cross-env gulp-if gulp-eslint babel-eslint gulp-sourcemaps exorcist

exorcist用於在外部生成map文件
目錄結構

gulp
├── src
│   ├── components
│   │   ├── Test
│   │   |   └── index.jsx
│   │   ├── Child
│   │   |   ├── index.css
│   │   |   └── index.jsx
│   │   ├── Count
│   │   |   ├── index.css
│   │   |   └── index.jsx
│       └── App.jsx 
├── node_modules
├── .eslintignore
├── .eslintrc.js
├── index.js
├── gulpfile.js
├── index.html
└── package.json

package.json執行腳本

"scripts": {
    "dev": "cross-env NODE_ENV=dev gulp dev",
    "build": "cross-env NODE_ENV=prod gulp build"
  },

腳本

// index.js
import './src/App.jsx'

// src/App.jsx
import React from 'react'
import { render } from 'react-dom'
import Test from './components/Test/index.jsx'

render(<Test />, document.getElementById("app"))

// src\components\Test\index.jsx
import React from 'react'
import Child from '../Child/index.jsx'
import Count from '../Count/index.jsx'

export default class Test extends React.Component {
  state = {
    msg: 'hello, world'
  }

  render() {
    const { msg } = this.state
    return (
      <React.Fragment>
        <Child msg={msg}/>
        <Count />
      </React.Fragment>
    )
  }
}

// src\components\Count\index.jsx
import React from 'react'

export default class Count extends React.Component {
  state = {
    count: 0,
    msg: '顯示一個計數器'
  }

  subFn = () => {
    this.setState((prevState, props) => ({
      count: prevState.count - 1
    }))
  }

  plusFn = () => {
    this.setState((prevState, props) => ({
      count: prevState.count + 1
    }))
  }

  render() {
    const { count, msg } = this.state
    return (
      <div>
        <p className="count-text">{msg}</p>
        <div>
          <button onClick={this.subFn}>-</button>
          <span>{count}</span>
          <button onClick={this.plusFn}>+</button>
        </div>
      </div>
    )
  }
}

// src\components\Count\index.css
.count-text {
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  color: red;
}

// src\components\Test\index.jsx
import React from 'react'

const Child = (props) => <div className="color">{props.msg}</div>

export default Child

// src\components\Test\index.css
.color {
  color: red;
}

構建腳本

const gulp = require('gulp')
const path = require('path')
const babelify = require('babelify')
const browserify = require('browserify')
    // 轉成stream流，gulp系
const source = require('vinyl-source-stream')
    // 轉成二進制流，gulp系
const buffer = require('vinyl-buffer')
const { series, parallel } = require('gulp')
const rm = require('rimraf')
const concat = require('gulp-concat')
const sass = require('gulp-sass')
const cheerio = require('gulp-cheerio')
const uglify = require('gulp-uglify')
const cssmin = require('gulp-cssmin')
const minifyHtml = require('gulp-minify-html')
const rename = require('gulp-rename')
const resversion = require('gulp-res-version')
const connect = require('gulp-connect')
const gulpif = require('gulp-if')
const eslint = require('gulp-eslint')
const sourcemaps = require('gulp-sourcemaps')
const exorcist = require('exorcist')

const PORT = process.env.PORT || 8080
const NODE_ENV = process.env.NODE_ENV
const isDev = NODE_ENV === 'dev'
const isProd = NODE_ENV === 'prod'

const _path = {
  main_js: './index.js',
  js: ['./index.js', './src/*.jsx', './src/**/**/*.jsx'],
  lint_js: ['./src/*.jsx', './src/**/**/*.jsx'],
  scss: ['./src/components/**/*.scss'],
  html: './index.html'
}

const clean = (done) => {
  rm('./dist', error => {
    if (error) throw error
    done()
  })
}

const _css = () => {
  return gulp.src(_path.scss)
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(concat('app.css'))
    .pipe(gulpif(isProd, cssmin()))
    .pipe(gulpif(isProd, rename({suffix: '.min'})))
    .pipe(gulpif(isDev, sourcemaps.write('/')))
    .pipe(gulp.dest('./dist/css'))
    .pipe(gulpif(isDev, connect.reload()))
}

const _lint = () => {
  return gulp.src(_path.lint_js)
    .pipe(eslint({
      useEslintrc: true
    }))
    .pipe(eslint.format())
    .pipe(eslint.failAfterError())
}

const _script = () => {
  return browserify({
      entries: _path.main_js,
      debug: true, // 生成inline-sourcemap
      transform: [babelify.configure({
        presets: ['@babel/preset-env', '@babel/preset-react'],
        plugins: [
          '@babel/plugin-transform-runtime', 
          ["@babel/plugin-proposal-decorators", { "legacy": true }], 
          ["@babel/plugin-proposal-class-properties", { "loose": true }]
        ]
      })]
    })
    .bundle()
    .pipe(gulpif(isDev, exorcist(path.resolve(__dirname, `dist/js/app${isDev ? '' : '.min'}.js.map`))))
    .pipe(source('app.js'))
    .pipe(buffer())
    .pipe(gulpif(isProd, uglify()))
    .pipe(gulpif(isProd, rename({suffix: '.min'})))
    .pipe(gulp.dest('./dist/js'))
    .pipe(gulpif(isDev, connect.reload()))
}

const _html = () => {
  return gulp.src(_path.html)
  .pipe(cheerio(($ => {
    $('script').remove()
    $('link').remove()
    $('body').append(`<script src="./js/app${isDev ? '' : '.min'}.js"></script>`)
    $('head').append(`<link rel="stylesheet" href="./css/app${isDev ? '' : '.min'}.css">`)
  })))
  .pipe(gulpif(isProd, minifyHtml({
    empty: true,
    spare: true
  })))
  .pipe(gulp.dest('./dist'))
  .pipe(gulpif(isDev, connect.reload()))
}

const _rev = () => {
  return gulp.src('./dist/*.html')
    .pipe(resversion({
      rootdir: './dist/',
      ignore: [/#data$/i]
    }))
    .pipe(gulp.dest('./dist'))
}

const _server = () => {
  connect.server({
    root: 'dist',
    port: PORT,
    livereload: true
  })
}

const _watch = () => {
  gulp.watch(_path.html, _html)
  gulp.watch(_path.js, _script)
  gulp.watch(_path.scss, _css)
}

module.exports = {
  build: series(clean, parallel(_script, _css, _html), _rev),
  dev: series(clean, _lint, parallel(_script, _css, _html), _rev, parallel(_server, _watch))
}

.eslintrc.js配置

module.exports = {
    "env": {
        "browser": true,
        "es2020": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    // 開發環境與ESLint當前的解析功能不兼容
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true, // 啓用實驗室特性
            "jsx": true
        },
        "ecmaVersion": 11,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        // "no-undef": "off",
        "react/prop-types": "off",
        "no-unused-vars": "off"
    }
};

注意：若是eslint解析時報了下面錯誤，請指定eslint解析器爲babel-eslint，由於eslint默認解析器Espree不支持ES7語法。

開發環境構建結果

生產環境構建結果