简介

前端工程化

前端工程化是一种将前端开发流程系统化、规范化和自动化的方法，旨在提高前端开发的效率、可维护性和可扩展性。它涵盖了许多方面，包括项目结构、代码质量、自动化工具、性能优化等，以确保前端开发团队能够更高效地协作和交付高质量的前端应用程序。

以下是前端工程化的一些关键概念和实践：

1. 项目结构：定义清晰的项目目录结构，使开发人员能够轻松查找和组织代码、样式和资源文件。
2. 版本控制：使用版本控制系统（如Git）来跟踪和管理代码的变化，以便多个开发人员可以协同工作，并轻松回滚到以前的版本。
3. 自动化构建：使用构建工具（如Webpack、Grunt、Gulp等）来自动化任务，如代码编译、压缩、打包和资源优化，以减少手动工作和减小文件大小。
4. 模块化开发：采用模块化的代码结构，使开发人员能够更好地管理和复用代码，提高可维护性。
5. 包管理器：使用包管理工具（如npm、Yarn）来管理和安装项目依赖，确保开发环境的一致性。
6. 代码质量：引入代码风格检查工具（如ESLint、TSLint）和单元测试框架，以确保代码质量和可靠性。
7. 自动化部署：使用持续集成/持续部署（CI/CD）工具来自动化应用程序的部署和发布过程，以确保快速且可靠的交付。
8. 性能优化：优化前端性能，包括加载时间、资源压缩、懒加载等，以提供更好的用户体验。
9. 文档和注释：编写清晰的文档和代码注释，以便其他开发人员能够理解和使用你的代码。

前端工程化的目标是使前端开发更高效、更可靠，并促使开发团队采用一致的最佳实践。它在现代Web开发中变得至关重要，特别是在大型和复杂的项目中，可以显著提高开发团队的生产力和代码质量。

Husky是什么？

Husky 是一个用于前端开发的 Node.js 工具，它主要用于在 Git 提交钩子（Git Hooks）中运行脚本。Git 提交钩子是在 Git 版本控制系统的特定事件发生时执行的自定义脚本，例如在代码提交前执行一些检查或验证。

Husky 的主要用途是帮助开发团队在代码提交前执行一些预定义的操作，以确保代码的质量和一致性。常见的用例包括：

1. 代码风格检查： 在提交代码之前运行 ESLint、Prettier 或其他代码风格检查工具，以确保代码遵循一致的编码风格。
2. 单元测试： 在提交前运行单元测试，以确保代码没有破坏现有功能。
3. 提交消息验证： 检查提交消息是否符合规范，以便生成清晰的提交日志。

Husky 可以配置为在不同的 Git 提交钩子事件中运行脚本，例如 pre-commit（在提交前运行）、pre-push（在推送前运行）等。通过在项目的 package.json 文件中配置 Husky，开发团队可以轻松集成这些检查和验证步骤，以确保代码的质量和一致性，并减少潜在的问题。

下面是一个示例 Husky 的配置示例：

{
    
  "husky": {
    
    "hooks": {
    
      "pre-commit": "lint-staged"
    }
  }
}

在上面的示例中，pre-commit 钩子被配置为在提交前运行 lint-staged 命令，该命令通常用于运行代码风格检查和其他验证步骤。通过 Husky 和类似工具的使用，开发团队可以更轻松地维护一致的代码质量和开发流程。

Husky与前端工程化的关系

Husky 是前端工程化中的一个工具，可以帮助开发团队实现自动化、规范化和高质量的前端开发流程。通过配置 Husky 钩子，可以确保代码质量、版本控制、协作和规范化流程得到有效管理，从而提高项目的整体质量和开发效率。

大致流程与相关依赖

以我们目前的项目背景为例，整个前端工程化的流程大致如图所示。当代码提交的时候，husky的两个钩子per-commit和commit-msg会对提交内容进行拦截，并通过per-commit.sh和commit-msg(注意这里没有.sh后缀)两个脚本执行校验命令。per-commit.sh主要是运行lint-staged，对提交的内容（代码、文件）进行校验和规范化处理，lint-staged根据不同的文件类型利用不同的工具(如ESLint、StyleLint等)进行校验和规范化处理，确保提交的内容风符合同一的规范；commit-msg主要运行commitlint，校验commit messgae是否符合相应的规范。

lint-staged

lint-staged 是一个用于在 Git 暂存区（Staging Area）中运行代码检查工具的工具。它通常与 Husky 和 Prettier 或 ESLint 等代码检查工具一起使用，以确保在提交代码之前只检查和格式化已经修改的代码，从而提高开发团队的效率和代码质量。 lint-staged 与 Husky 结合使用时，通过在提交代码前运行 lint-staged 命令，来在提交前进行代码检查和格式化。

ESLint

ESLint 是一个强大的 JavaScript 代码质量检查工具，它有助于提高代码的可维护性、一致性和可读性。通过配置和使用 ESLint，开发团队可以确保项目中的 JavaScript 代码符合一致的标准和最佳实践，从而提高开发效率和代码质量。

Stylelint

Stylelint 是一个用于检查和规范 CSS（层叠样式表）和 CSS 预处理器（如 Sass 和 Less）代码质量的工具。类似于 ESLint 用于 JavaScript 代码的检查和规范，Stylelint 旨在帮助开发人员和团队发现和修复 CSS 代码中的问题、错误和不规范之处，以确保代码的一致性、可维护性和可读性。

Prettier

Prettier 是一个代码格式化工具，用于自动化地格式化代码，使其符合一致的编码风格和规范。它支持多种编程语言，包括 JavaScript、TypeScript、HTML、CSS、JSON、Markdown 等，旨在减轻开发人员在代码风格上的决策负担，从而提高代码的可读性和一致性。

@commitlint/cli

@commitlint/cli 是一个用于检查 Git 提交消息是否符合指定的规范的命令行工具。它通常与 Husky 和 Commitizen 等工具一起使用，以确保团队在提交代码时遵循一致的提交消息规范。

@commitlint/config-conventional

@commitlint/config-conventional 是一个预定义的配置包，用于与 @commitlint/cli 结合使用，以规范化 Git 提交消息的格式。它基于 Conventional Commits 规范，这是一种约定俗成的提交消息格式，旨在提供一致、清晰且易于理解的提交消息，特别适用于团队协作和自动生成变更日志（changelog）。

Conventional Commits 规范要求提交消息遵循以下结构：

<类型>(可选范围): <描述>

[可选的正文]

[可选的脚注]

@commitlint/config-conventional 配置包定义了 Conventional Commits 规范的验证规则，以确保提交消息遵循上述格式。如果提交消息不符合规范，@commitlint/cli 将生成相应的错误消息，并拒绝提交。

使用 @commitlint/config-conventional 可以帮助团队在项目中实施统一的提交消息格式，从而改进提交历史的可读性和维护性，并为自动生成变更日志提供了便利。它通常与 Husky 和其他前端工程化工具一起使用，以确保提交消息的一致性。

安装配置教程

安装

首先，你需要在你的前端项目中安装 Husky 以及配合Husky使用的依赖。你可以使用 npm 或 Yarn 来完成安装。下面以npm为例，安装Husky以及上面提到的常用依赖。

#钩子工具
npm install husky --save-dev
#校验和格式化修改的内容
npm install [email protected] --save-dev
#校验commit message
npm install @commitlint/[email protected] --save-dev
npm install @commitlint/[email protected] --save-dev
#eslint
npm install [email protected] --save-dev
npm install [email protected] --save-dev
npm install [email protected] --save-dev
npm install [email protected] --save-dev
npm install [email protected] --save-dev
#stylelint
npm install stylelint stylelint-config-standard --save-dev
npm install stylelint-scss stylelint-config-recommended-scss --save-dev

启用Husky

执行以下命令启用Husky，执行完命令后，项目根路径中会多出一个.husky的文件夹。

npx husky install

如果考虑后续会多次用到该命令的话，可以在package.json中加一条命令："prepare": "husky install"，后续运行npm run prepare即可。

配置钩子

在.husky文件中创建两个的shell脚本文件：per-commit.sh和commit-msg。这两个脚本将在相应的git hook中被调用。per-commit钩子在提交之前触发，即在执行 git commit 命令时触发。commit-msg 钩子是在提交消息被保存到版本控制系统之后触发的，但在提交被真正完成之前执行。

per-commit.sh

在per-commit中执行lint-staged检查并格式化提交的代码。

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

echo "-----------代码正在eslint格式化-----------"

# "lint:eslint": "eslint --cache --max-warnings 0  \"{applications,packages}/**/*.{vue,ts,js}\" --fix",
# 对指定目录下的文件扫描后eslint格式化
# 以下命令可以开启使用
# npm run lint:eslint

# 只对提交文件进行eslint格式化
# 以下命令可以开启使用

npx lint-staged

echo "-----------代码格式化完成-----------"

commit-msg

在commit-msg中执行commitlint检查commit message的规范。

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

echo "-----------git提交信息校验-----------"
echo "ⓘ   提交规范: 遵循Conventional Commits规范。"
echo "ⓘ   规范详情: https://juejin.cn/post/6985500205554597918"
npx --no -- commitlint --edit ${1}

注意，在windows 上，如果是通过 Git Bash 去进行Git操作的，Git hook中的语句含有yarn命令时，会导致Git hook失效，这时候需要再额外添加一个common.sh文件，内容如下：

command_exists () {
     
command -v "$1" >/dev/null 2>&1
}

# Workaround for Windows 10, Git Bash and Yarn
if command_exists winpty && test -t 1; then
exec < /dev/tty
fi

同时在per-commit.sh和commit-msg引入，如

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
. "$(dirname "$0")/common.sh"

# ...

添加lint-staged配置文件

在项目根路径中创建一个名为.lintstagedrc.json的文件，文件内容如下：

{
    
  "*.{js,jsx,ts,tsx}": [
    "eslint --fix"
  ],
  "{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [
    "prettier --write--parser json"
  ],
  "package.json": [
    "prettier --write"
  ],
  "*.vue": [
    "eslint --fix",
    "stylelint --fix"
  ],
  "*.{scss,less,styl,html}": [
    "stylelint --fix",
    "prettier --write"
  ],
  "*.md": [
    "prettier --write"
  ]
}

lint-staged会去匹配提交文件属于哪种类型的文件，并根据以上配置文件对应的文件类型执行相应的命令。

添加ESLint和StyleLint配置文件

由于lint-staged使用了eslint和stylelint的相关命令，所以这边我们需要引入eslint和stylelint在自定义我们的规范要求。

首先先在根目录创建一个.eslintrc.js文件，存放eslint的规范要求：

const msgType = process.env.NODE_ENV === "development" ? 1 : 2 // 规则提示类型

module.exports = {
    
  // 指定此配置文件为根配置文件，即停止在父级目录中寻找其他配置文件。
  root: true,
  // 指定代码的环境为 Node.js 环境，在 Node.js 项目中使用 ESLint 时需要设置。
  env: {
    
    node: true,
  },
  // 继承的 ESLint 配置。
  extends: [
    // 继承 Vue 的插件 plugin:vue/essential。它提供了一组用于 Vue.js 项目的 ESLint 规则。
    "plugin:vue/essential"
  ],
  // 指定全局变量，以告诉 ESLint 在验证过程中这些变量已经定义，从而避免产生未定义变量的警告
  globals: {
    },
  // 指定 ESLint 解析代码的解析器
  parserOptions: {
    
    ecmaVersion: 2018,
    sourceType: "module",
  },
  // 可以用于设置和自定义 ESLint 的规则。您可以在这里添加和修改规则以符合您的代码风格和要求
  rules: {
    
    "vue/multi-word-component-names": 0, // 组件件名称是否以驼峰格式命名
    "strict": 2, // 使用严格模式
    "no-alert": 2, // 禁止使用alert confirm prompt
    "no-console": [process.env.ENV_KEY === "development" ? 0 : 1, {
     allow: ["warn", "error"] }], // 禁止使用console, 只能使用console.warn console.error
    "no-debugger": process.env.NODE_ENV === "development" ? 0 : 2, // 禁止使用debugger
    "prefer-arrow-callback": msgType, // 首选箭头函数
    "prefer-const": msgType, // 首选const
    "prefer-spread": msgType, // 首选展开运算
    "prefer-template": msgType, // 首选模板字符串
    "quotes": [msgType, "single"], // 引号类型 `` "" ''
    // "quote-props": [msgType, "always"], // 对象字面量中的属性名是否强制双引号
    "jsx-quotes": [msgType, "prefer-double"], // 强制在 JSX 属性中一致使用双引号或单引号
    "no-useless-concat": msgType, // 不允许两个字符串连接在一起
    "no-multi-str": msgType, // 字符串不能用\换行
    "no-new": msgType, // 禁止在使用new构造一个实例后不赋值
    "no-new-func": msgType, // 禁止使用new Function
    "no-new-object": msgType, // 禁止使用new Object()
    "no-new-require": msgType, // 禁止使用new require
    "no-new-wrappers": msgType, // 禁止使用new创建包装实例，new String new Boolean new Number
    "no-array-constructor": msgType, // 不允许使用Array构造函数
    "semi": msgType, // 语句强制分号结尾
    "semi-spacing": [msgType, {
     "before": false, "after": true }], // 分号前后空格
    "no-extra-semi": msgType, // 禁止多余的分号
    "func-style": [msgType, "expression"], // 使用函数表达式
    "no-underscore-dangle": msgType, // 标识符不能以_开头或结尾
    "no-await-in-loop": msgType, // 不允许await在循环体内使用
    "no-bitwise": msgType, // 不允许按位运算符
    "no-buffer-constructor": msgType, // 不允许调用和构造Buffer()构造函数
    "no-caller": msgType, // 阻止使用已弃用和次优代码
    "no-catch-shadow": msgType, // 禁止catch子句参数与外部作用域变量同名
    "no-cond-assign": msgType, // 禁止在条件表达式中使用赋值语句
    "no-confusing-arrow": msgType, // 不在可能与比较运算符混淆的地方使用箭头函数语法
    "no-const-assign": msgType, // 禁止修改const声明的常量
    "no-constant-condition": msgType, // 禁止在条件中使用常量表达式 if(true) if(1)
    "no-continue": msgType, // 禁止使用continue
    "no-control-regex": msgType, // 禁止在正则表达式中使用控制字符
    "no-delete-var": msgType, // 不能对var声明的变量使用delete操作符
    "no-div-regex": msgType, // 不能使用看起来像除法的正则表达式/=foo/
    "no-dupe-args": msgType, // 函数参数不能重复
    "no-dupe-class-members": msgType, // 类成员中不能有相同名称的声明
    "no-dupe-keys": msgType, // 在创建对象字面量时不允许键重复 {a:1,a:1}
    "no-duplicate-case": msgType, // switch中的case标签不能重复
    "no-duplicate-imports": msgType, // 从单个模块进行的所有导入都以单一import语句存在
    "no-empty": msgType, // 块语句中的内容不能为空
    "no-empty-character-class": msgType, // 正则表达式中的[]内容不能为空
    "no-eq-null": 0, // 禁止对null使用==或!=运算符
    "no-eval": msgType, // 禁止使用eval
    "no-ex-assign": msgType, // 禁止给catch语句中的异常参数赋值
    "no-extend-native": msgType, // 禁止扩展native对象
    "no-extra-bind": msgType, // 禁止不必要的函数绑定
    "no-extra-boolean-cast": msgType, // 禁止不必要的boolean转换
    "no-extra-label": msgType, // 消除不必要的标签
    "no-extra-parens": msgType, // 禁止非必要的括号
    "no-fallthrough": msgType, // 禁止switch穿透
    "no-floating-decimal": msgType, // 禁止省略浮点数中的0 .5 3.
    "no-func-assign": msgType, // 禁止重复的函数声明
    "no-global-assign": msgType, // 不允许修改只读全局变量
    "no-implicit-coercion": msgType, // 禁止隐式转换
    "no-implied-eval": msgType, // 禁止使用隐式eval
    "no-inner-declarations": [msgType, "functions"], // 禁止在块语句中使用声明（变量或函数）
    "no-invalid-regexp": msgType, // 禁止无效的正则表达式
    "no-invalid-this": msgType, // 禁止无效的this，只能用在构造器，类，对象字面量
    "no-irregular-whitespace": msgType, // 不能有不规则的空格
    "no-iterator": msgType, // 禁止使用__iterator__ 属性
    "no-label-var": msgType, // label名不能与var声明的变量名相同
    "no-labels": msgType, // 禁止标签声明
    "no-lone-blocks": msgType, // 禁止不必要的嵌套块
    "no-lonely-if": 0, // 将if语句作为else块中的唯一语句
    "no-mixed-operators": [msgType, {
    "groups": [["==","!=","===","!==",">",">=","<","<="], ["&&","||"]]}], // 复杂的表达式使用括号
    "no-mixed-spaces-and-tabs": msgType, // 禁止混用tab和空格
    "no-multi-spaces": msgType, // 不能用多余的空格
    "no-multiple-empty-lines": [msgType, {
     "max": 1 }], // 空行最多不能超过1行
    "no-negated-condition": msgType, // 禁止不必要的否定条件
    "no-negated-in-lhs": msgType, // in 操作符的左边不能有!
    "no-nested-ternary": msgType, // 禁止使用嵌套的三目运算
    "no-obj-calls": msgType, // 不能调用内置的全局对象，比如Math() JSON()
    "no-octal": msgType, // 禁止使用八进制数字
    "no-octal-escape": msgType, // 禁止使用八进制转义序列
    "no-param-reassign": msgType, // 禁止给参数重新赋值
    "no-process-exit": msgType, // 禁止使用process.exit()
    "no-proto": msgType, // 禁止使用__proto__属性
    "no-redeclare": msgType, // 禁止重复声明变量
    "no-regex-spaces": msgType, // 禁止在正则表达式字面量中使用多个空格 /foo bar/
    "no-return-assign": msgType, // return 语句中不能有赋值表达式
    "no-script-url": msgType, // 禁止使用javascript:void(0)
    "no-self-compare": msgType, // 不能比较自身
    "no-sequences": msgType, // 禁止使用逗号运算符
    "no-shadow": msgType, // 外部作用域中的变量不能与它所包含的作用域中的变量或参数同名
    "no-shadow-restricted-names": msgType, // 严格模式中规定的限制标识符不能作为声明时的变量名使用
    "no-spaced-func": msgType, // 函数调用时 函数名与()之间不能有空格
    "no-sparse-arrays": msgType, // 禁止稀疏数组， [1,,2]
    "no-trailing-spaces": msgType, // 一行结束后面不要有空格
    "no-throw-literal": msgType, // 禁止抛出字面量错误 throw "error";
    "no-undef": msgType, // 不能有未定义的变量
    "no-undef-init": msgType, // 变量初始化时不能直接给它赋值为undefined
    "no-undefined": msgType, // 不能使用undefined
    "no-unexpected-multiline": msgType, // 避免多行表达式
    "no-unneeded-ternary": msgType, // 禁止不必要的嵌套 var isYes = answer === 1 ? true : false;
    "no-unreachable": msgType, // 不能有无法执行的代码
    "no-unused-expressions": msgType, // 禁止无用的表达式
    "no-unused-vars": [msgType, {
     "vars": "all", "args": "none" }], // 不能有声明后未被使用的变量或参数
    "no-use-before-define": msgType, // 未定义前不能使用
    "no-useless-call": msgType, // 禁止不必要的call和apply
    "no-void": msgType, // 禁用void操作符
    "no-var": msgType, // 禁用var，用let和const代替
    "no-with": msgType, // 禁用with
    "array-bracket-spacing": [msgType, "never"], // 是否允许非空数组里面有多余的空格
    "arrow-parens": [msgType, "always"], // 箭头函数用小括号括起来
    "arrow-spacing": [msgType, {
     "before": true, "after": true }], // =>的前/后括号
    "block-scoped-var": msgType, // 块语句中使用var
    "brace-style": [msgType, "1tbs"], // 大括号风格
    "camelcase": msgType, // 强制驼峰法命名
    "comma-dangle": [msgType, "never"], // 对象字面量项尾不能有逗号
    "comma-spacing": [msgType, {
     "before": false, "after": true }], // 逗号前后的空格
    "comma-style": [msgType, "last"], // 逗号风格，换行时在行首还是行尾
    "consistent-this": [msgType, "self"], // this别名
    "curly": [msgType, "all"], // 必须使用 if(){} 中的{}
    "default-case": msgType, // switch语句最后必须有default
    "dot-location": [msgType, "object"], // 对象访问符的位置，换行的时候在行首还是行尾
    "eqeqeq": 0, // 必须使用全等
    "func-names": [msgType, "never"], // 函数表达式必须有名字
    "indent": [msgType, 2], // 缩进风格
    "init-declarations": [msgType, "always"], // 声明时必须赋初值
    "key-spacing": [msgType, {
     "beforeColon": false, "afterColon": true }], // 对象字面量中冒号的前后空格
    "max-depth": [msgType, 5], // 嵌套块深度
    "max-nested-callbacks": [msgType, 3], // 回调嵌套深度
    "max-params": [msgType, 5], // 函数最多只能有几个参数
    "object-curly-spacing": [msgType, "always"], // 大括号内是否允许不必要的空格
    "object-shorthand": msgType, // 强制对象字面量缩写语法
    "one-var": [msgType, "never"], // 连续声明
    "operator-assignment": [msgType, "never"], // 赋值运算符 += -=什么的
    "operator-linebreak": [msgType, "after"], // 换行时运算符在行尾还是行首
    "padded-blocks": [msgType, "never"], // 块语句内行首行尾是否要空行
    "radix": msgType, // parseInt必须指定第二个参数
    "space-before-blocks": [msgType, "always"], // 不以新行开始的块{前面要不要有空格
    "space-before-function-paren": [msgType, "never"], // 函数定义时括号前面要不要有空格
    "space-in-parens": [msgType, "never"], // 小括号里面要不要有空格
    "space-unary-ops": [msgType, {
     "words": true, "nonwords": false }], // 一元运算符的前/后要不要加空格
    "use-isnan": msgType, // 禁止比较时使用NaN，只能用isNaN()
    "spaced-comment": [msgType, "always"], // 注释一致性
    "no-path-concat": 0, // node中不能使用__dirname或__filename做路径拼接
    "no-process-env": 0, // 禁止使用process.env
    "no-restricted-modules": 0, // 禁用指定node.js模块，使用就会报错
    "no-sync": 0, // nodejs 禁止同步方法
    "newline-after-var": 0, // 变量声明后是否需要空一行
  }
}

接着创建一个.stylelintrc.js文件，存放stylelint的规范要求：

module.exports = {
    
  extends: [
    "stylelint-config-standard", // CSS默认规则
    "stylelint-config-recommended-scss", // 使用SCSS推荐规则
  ],
  plugins: [
    "stylelint-scss" // 启用stylelint-scss插件
  ],
};

添加commit-lint配置文件

在根目录创建一个名为commitlint.config.js的文件，文件内容如下：

module.exports = {
    
  extends: ['@commitlint/config-conventional'],
  rules: {
    
    'type-enum': [
      // type枚举
      2,
      'always',
      [
        'build', // 编译相关的修改，例如发布版本、对项目构建或者依赖的改动
        'feat', // 新功能
        'fix', // 修补bug
        'docs', // 文档修改
        'style', // 代码格式修改, 注意不是 css 修改
        'refactor', // 重构
        'perf', // 优化相关，比如提升性能、体验
        'test', // 测试用例修改
        'revert', // 代码回滚
        'ci', // 持续集成修改
        'config', // 配置修改
        'chore' // 其他改动
      ]
    ],
    'type-empty': [2, 'never'], // never: type不能为空; always: type必须为空
    'type-case': [0, 'always', 'lower-case'], // type必须小写，upper-case大写，camel-case小驼峰，kebab-case短横线，pascal-case大驼峰，等等
    'scope-empty': [0],
    'scope-case': [0],
    'subject-empty': [2, 'never'], // subject不能为空
    'subject-case': [0],
    'subject-full-stop': [0, 'never', '.'], // subject以.为结束标记
    'header-max-length': [2, 'always', 72], // header最长72
    'body-leading-blank': [0], // body换行
    'footer-leading-blank': [0, 'always'] // footer以空行开头
  }
};