构建流程

在前端工程化中，构建流程是自动化的核心部分之一。具体到构建流程，它包含了将源代码转换成可以在浏览器中运行的生产代码的一系列步骤。以下是构建流程中常见的几个步骤：

代码转译： 现代前端项目通常使用ES6+或TypeScript等语言编写，这些高级的JavaScript语法和类型系统需要通过Babel或TypeScript Compiler等工具转译成普通的ES5 JavaScript代码，以确保兼容更多的浏览器环境。
模块打包： 由于前端采用模块化开发，因此需要借助Webpack、Rollup、Parcel等打包工具将这些模块化的文件打包成一个或多个bundle文件，便于在浏览器中加载。
预处理器编译： 如果项目中使用了Sass/Less/Stylus等CSS预处理器或者Pug等HTML预处理器，那么在构建流程中需要将它们编译成标准的CSS和HTML。
代码压缩： 为了减少文件大小加快加载速度，构建流程中会包括压缩步骤，通过UglifyJS、Terser、CSSNano等工具对JavaScript、CSS进行压缩，去除不必要的空格、注释，甚至进行代码混淆。
自动添加CSS前缀： 使用Autoprefixer等工具根据Can I Use数据库自动为CSS代码添加供应商前缀（vendor prefixes），以确保样式在不同浏览器中的兼容性。
图片和字体优化： 可以通过各种loader/plugin将图片和字体文件进行压缩和优化，减少网络加载时间。
代码分割和懒加载： 通过配置，实现代码分割（Code Splitting），将代码划分为按需加载的块，提高首屏加载速度。
环境变量替换： 在构建时根据不同的环境（开发/测试/生产）替换相应的环境变量。
静态资源管理： 对输出的文件进行重命名、添加hash后缀等，用于缓存控制和版本管理。
自动化测试： 在构建过程中集成单元测试、端对端测试等，确保代码质量。
监听文件变化： 在开发模式下，构建工具可以监听源代码的变化并实时重新构建反馈，如Webpack的Hot Module Replacement（HMR）功能。
生成Source Maps： 方便开发者在浏览器中调试压缩后的代码。

CI/CD （Continuous Integration/Continuous Deployment）

整个自动化构建流程可通过CI/CD（持续集成/持续部署）工具如Jenkins、Travis CI、GitHub Actions进行自动化，实现代码合并到主分支后自动执行测试与部署

yml

name: Node.js CI

on:
  push:
    branches: [master]
  pull_request:
    branches: [master]

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [16.x, 18.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
      - uses: actions/checkout@v2
      - uses: pnpm/action-setup@v2.0.1
        with:
          version: 6.27.1
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v2
        with:
          node-version: ${{ matrix.node-version }}
          cache: 'pnpm'
      - run: pnpm i --no-frozen-lockfile
      - run: pnpm build
      - run: pnpm test

例子：https://zzh948498.github.io/vue-admin-template/#/dashboard

代码：https://github.com/zzh948498/vue-admin-template/blob/main/.github/workflows/docs.yml

你也可以使用nodejs + git submodule自行构建自动化构建服务。

提交代码触发构建
执行build script
执行自动化测试
将代码发布至存储桶或服务器
钉钉通知

构建流程 ​

CI/CD （Continuous Integration/Continuous Deployment） ​

构建流程

CI/CD （Continuous Integration/Continuous Deployment）