制定你自己的前端工作流

fe-workflow

为什么使用 fe-workflow？

本项目经多多次迭代，终于迎来了第三次革命。以 @pkb/cli 脚手架为根本，创建/配置项目，以 webpack-box 为服务，打包/运行项目。以 workflow-ui 为平台，构建工作流。

fe-workflow 有哪些优势

📦 使用了目前最流行的打包工具 webpack，且使用 webpack-chain 进行 webpack 配置
🏈 约定式目录
🍁 多框架支持（vue/react/小程序等应有尽有）
💈 编译速度（支持一键开启 dll 等）
🚄 功能完备（可支持 webpack 所有最佳实践方案）
🎉 可插拔的插件系统（多项目管理）
🚀 定制化解决方案（webp、图片压缩、骨架屏等）
🧪 测试（单元测试、e2e）
📺 工具类集成（适配 adapter、callApp、无痕埋点、canvas 引擎等）
🔧 集成解决方案（提测、联调、部署）
🏠 监控（性能监控、异常错误监控）
🌴 界面化管理项目（待完成）
🍎 可扩展

@pkb/cli 脚手架

@pkb/cli 为本项目的脚手架，可用来生成项目、添加插件、检查项目配置、升级更新等等，主要的功能就是对整体项目的管理。

webpack-box 服务

webpack-box 是一个对 webpack 进行了封装的开箱即用的项目。集成了 webpack 的各种优化，配置了 webpack 常用到的 loader 和 plugin，原则上您不需要做任何配置就可以使用。
webpack-box 支持插件配置，您可以使用插件管理项目配置，可以多项目复用
您也可以当作参考手册，来这里找到任何想要的 webpack 配置
如果想要从头系统学习，可以切换到不同分支上，我把每课时的内容都分别切成了不同的分支，您可以在这些分支上自由尝试

本项目诚邀所有共建者，一起来完善，无论你提供了多少的代码都可以被展示在贡献者名单内！

开发&学习

项目计划把 issue 整理到 project 中做好分类，并有计划的完成目标。
开发指南如果想要一起开发的可以参考这里。
插件市场目前已经完成的插件。
好的文章把我觉得好的 webpack 的文章整理到我的 wiki 里，也可以在项目中点击 wiki 查看。

所有课题

点击关闭/打开所有课题

安装

点击关闭/打开安装

1. 全局脚手架安装及使用

脚手架主要针对所有项目的管理，甚至可以针对任何非本工程的项目使用

# 全局安装
npm i -g @pkb/cli # 全局安装使用

pk create <project-name> # 创建项目（待完善）
pk add <plugin> # 安装插件
pk info # 查看项目及系统配置

2. webpack-box 配置安装及开发

webpack-box 针对某个项目使用，可以在本地 npm script 内使用，也可以全局使用

npm i @pkb/webpack-box -D # 本地安装
npm i @pkb/webpack-box -g # 全局安装

使用

点击关闭/打开使用

# --- 项目构建 ---
webpack-box dev   # 开发环境
webpack-box build # 生产环境
webpack-box dll   # 编译差分包
webpack-box dev index   # 指定页面编译（多页面）
webpack-box build index # 指定页面编译（多页面）
webpack-box build index --report # 开启打包分析
webpack-box build:ssr  # 编译ssr
webpack-box ssr:server # 在 server 端运行
# --- 切换 webpack 版本 ---
webpack-box upgrade 5 # 可以切换到 webpack5/4
# --- 检查配置 ---
webpack-box inspect > output.json # 导出所有配置到 output.json
webpack-box inspect --rules # 查看所有 loader 列表
webpack-box inspect --rule babel # 查看指定 loader 配置
webpack-box inspect --plugins # 查看所有插件列表
webpack-box inspect --plugin mini-css-extract # 查看指定插件配置
# --- graphql ---
webpack-box server:gql # graphql-server
# --- 插件命令及安装 ---
# npm i -D @pkb/plugin-eslint
webpack-box eslint # 自动修复 eslint 错误
# npm i -D @pkb/plugin-tslint
webpack-box tslint # 自动修复 tslint 错误
# npm i -D @pkb/plugin-stylelint
webpack-box stylelint # 自动修复 stylelint 错误

在 package.json 中使用

{
  "scripts": {
    "dev": "webpack-box dev",
    "build": "webpack-box build",
    ...
  }
}

所有配置

点击关闭/打开所有配置

扩展配置

点击关闭/打开扩展配置

在根目录下添加 `box.config.js`，即可配置使用

box.config.js

const path = require('path')
function resolve (dir) {
  return path.join(process.cwd(), dir)
}

module.exports = function (config) {
  /**
   * @param {object} dll 开启差分包
   * @param {object} pages 多页面配置 通过 box run/build index 来使用
   * @param {function} chainWebpack
   * @param {string} entry 入口
   * @param {string} output 出口
   * @param {string} publicPath
   * @param {string} port 端口
   * @param {object} eslint eslint 配置
   * @param {object} stylelint stylelint 配置
   * @param {object} eslint eslint 配置
   * @param {object} alias 配置别名
   * @param {object} env 配置通用变量，可以在 node 跟 web 之间共同使用
   * @param {Boolean} filenameHashing 文件名是否使用 hash，当文件发生变动的时候 filename 才会改变
   * @param {Boolean} css 配置 css
   * @param {Boolean} mock 开启 mock
   */
  return {
    entry: 'src/main.js',
    output: 'dist',
    publicPath: '/common/',
    port: 8889,
    mock: true,
    env: {
      REACT: 'react' // 配置 react
    },
    alias: {
      '@': resolve('src'),
      '@src': resolve('src')
    },
    resources: {
      less: {
        patterns: [
          path.resolve(__dirname, './src/global/*.less')
        ]
      },
      scss: {
        patterns: [
          path.resolve(__dirname, './src/global/*.scss')
        ]
      }
    },
    css: {
      sourceMap: true,
      loaderOptions: {
        css: {},
        less: {
          globalVars: {
            gray: '#ccc'
          }
        },
        sass: {},
        postcss: {},
        stylus: {}
      },
      isCssModule: false, // 是否对css进行模块化处理
      needInlineMinification: false // 是否需要压缩css
    },
    filenameHashing: true,
    eslint: {
      lintOnSave: true, // 开启运行时检测
      extensions: ['js', 'jsx', 'vue'] // 默认 ['js', 'jsx']
    },
    tslint: {
      lintOnSave: true, // 开启运行时检测
      useThreads: true
    },
    stylelint: {
      lintOnSave: true // 开启运行时检测
      // extensions: ['vue', 'htm', 'html', 'css', 'sss', 'less', 'scss']
    },
    // dll: {
    //   venders: ['react']
    // },
    pages: {
      index: {
        entry: 'src/main.js',
        template: 'public/index.html',
        filename: 'index.html'
      },
      index2: {
        entry: 'src/main.js',
        template: 'public/index2.html',
        filename: 'index2.html'
      }
    },
    chainWebpack(config) {}
  }
}

LesixCoder/fe-workflow