前端工程化
统一代码风格
Lint 工具相当于为 js 增加了编译过程，在代码部署运行前进行静态分析，找到出错的地方和不规范的代码。
总结一下 ESLint 的作用及优势：
- 检查语法错误，避免低级 bug；
比如：api 语法错误、使用了未定义的变量、修改 const 变量
- 统一团队代码风格
比如：使用 tab 还是空格，使用单引号还是双引号等
- 确保代码遵循最佳实践
commitlint
husky/lint-staged
npx mrm lint-staged
//package.json
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},lint-staged 只会检查暂存区的代码，能减少很多校验。
他具有三个钩子：
"pre-commit": "npm run lint"，在git commit前执行npm run lint检查代码格式。"commit-msg": "node script/verify-commit.js"，在git commit时执行脚本verify-commit.js验证 commit 消息。如果不符合脚本中定义的格式，将会报错。"pre-push": "npm test"，在你执行git push将代码推送到远程仓库前，执行npm test进行测试。如果测试失败，将不会执行这次推送
actions
在 Github Actions 中需要了解 Workflow、Event、Runner、Job、Step、Action 等基础概念，如下所示：
- Workflow（工作流）：在一个仓库项目中可以设计多个不同的工作流，每一个工作流都由单独的 YAML 文件在项目的
.github/workflows目录中进行定义，例如在本课程中可以设计 CI 和 CD 两个不同的工作流 - Event（事件）：用于触发工作流执行的特定活动，例如代码提交后触发工作流执行的 Push 事件、Pull requeset 事件、推送代码到启用了 Github Pages 对应的分支时触发执行的事件等，更多事件可以查看触发工作流的事件
- Runner（运行器）：用于运行 Job 的服务器，包括 Ubuntu Linux、Microsoft Windows 和 MacOS 等类型，当然也可以自定义运行器
- Job（作业）：每一个运行器可以运行一个单独的 Job，并且 Job 之间还可以配置依赖关系，例如一个 Job 的执行需要依赖另外一个 Job 执行完成后才能执行，默认情况下 Job 之间并行执行
- Step（步骤）：每一个 Job 可以包含多个可执行的 Step，这些 Step 可以是 Shell 脚本命令，也可以是 Github Actions 中可复用的 Action。 Step 按顺序执行，并且可以前后互相依赖
- Action（操作）：在 Step 中除了可以使用 Shell 脚本还可以使用 Action 执行流程，Action 可以理解为插件，主要用于封装可复用的复杂执行流程，并且 Action 也可以使用 Node 脚本进行设计，设计后还可以将其发布到 Github Marketplace 供别人使用，例如常见的可复用 Action 包括 actions/setup-node@v3（安装 Node 环境）和 actions/checkout@v4（下载仓库代码到 CI 所在的服务环境）
温馨提示：可以查看 awesome-actions 了解更多的 Action。
workflow
在.git/workflows 文件夹创建一个 xx.yml 文件
以我的博客自动部署为例
name: GitHub Actions Build and Deploy Demo
on:
push: // 可以使用数组
branches:
- master // 这部分代表监听每一次到 master 分支的 push ，有一次 push 就会执行一次 actions 。
jobs:
build-and-deploy:
runs-on: ubuntu-latest //一个名为 build-and-deploy 的工作需要在 ubuntu-latest 环境中运行，这是因为后文 actions 脚本是在 ubuntu 编写的，所以要求环境使用 ubuntu 。
steps:
- name: Checkout
uses: actions/checkout@master
- name: Build and Deploy
uses: JamesIves/github-pages-deploy-action@master
env:
ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} // 配置的秘钥
BRANCH: gh-pages // 发布的分支
FOLDER: docs/.vuepress/dist // 上传的文件地址
BUILD_SCRIPT: npm install && npm run docs:build // 需要执行的脚本代码查看：https://github.com/chelseachen007/Blog
webhooks
这是一种自己全量操作的服务器部署方法，在私有服务器上接收 github 传输过来的请求，并做出对应的 docker 部署操作
具体操作看 Docker
代码
详细代码都在 git 文件，并且附有详细的 webpack 配置，为后续实现一个完整的脚手架做好准备 https://github.com/chelseachen007/engineer