前端工程化，前端监控，工作流，部署，性能

news2024/11/15 11:43:26

开发规范

创建项目的时候，配置下 ESlint，stylelint， prettier， commitlint 等;

ESLint

主要功能：
ESLint 是一个静态代码检查工具，用于在 JavaScript 代码中识别和报告模式。它的目标是提供一个插件化的 JavaScript 代码质量工具。

应用场景：
在前端开发过程中，ESLint 能够帮助开发者发现代码中的错误、不符合规范的地方，从而提高代码质量。

配置方法：

全局安装 ESLint：在命令行中执行 npm install -g eslint。
初始化 ESLint 配置：在项目根目录下执行 eslint --init，然后根据提示选择需要的配置。
配置文件：在项目的根目录下创建一个 .eslintrc 文件（可以是 JSON、YAML 或 JS 格式），并在其中指定规则、插件、解析器等。例如，指定使用 Babel 解析器：{ "parser": "babel-eslint" }。

常见问题解决方法：

如果遇到 ESLint 报错，首先检查是否安装了正确的依赖，并查看报错信息以确定具体问题。
可以根据报错信息修改代码或配置 ESLint 规则来解决问题。

Stylelint

主要功能：
Stylelint 是一个强大的、现代化的 CSS/SCSS/Less 检查工具，可以帮助开发者遵循一致的代码风格和最佳实践。

应用场景：
在前端开发过程中，Stylelint 能够确保 CSS 代码的风格一致性和可读性。

配置方法：

安装 Stylelint：在项目中执行 npm install --save-dev stylelint。
配置文件：在项目的根目录下创建一个 .stylelintrc 文件（可以是 JSON 或 YAML 格式），并在其中指定规则、插件等。例如，指定一个规则禁止在数字前加零："number-leading-zero": "never"。

常见问题解决方法：

如果遇到 Stylelint 报错，首先检查是否安装了正确的依赖，并查看报错信息以确定具体问题。
可以根据报错信息修改 CSS 代码或配置 Stylelint 规则来解决问题。

Prettier

主要功能：
Prettier 是一个代码格式化工具，支持多种语言，包括 JavaScript、CSS、HTML 等。它可以帮助开发者自动调整代码格式，使其符合一致的样式。

应用场景：
在前端开发过程中，Prettier 可以自动格式化代码，节省开发者手动调整代码格式的时间。

配置方法：

安装 Prettier：在项目中执行 npm install --save-dev --save-exact prettier。
配置文件：在项目的根目录下创建一个 .prettierrc 文件（可以是 JSON、YAML 或 JS 格式），并在其中指定格式化规则。Prettier 的配置相对简单，主要指定一些基本的格式化选项，如缩进大小、换行符等。
集成到编辑器：将 Prettier 集成到编辑器中（如 VS Code），以便在保存文件时自动格式化代码。

常见问题解决方法：

如果 Prettier 没有按预期格式化代码，首先检查是否安装了正确的依赖，并查看 Prettier 的配置文件以确定配置是否正确。
可以尝试在编辑器中手动触发格式化操作来查看效果。

Commitlint

主要功能：
Commitlint 是一个帮助你编写更规范 git commit message 的工具。它基于一组可配置的规则来检查 commit message 的格式和内容。

应用场景：
在团队协作中，Commitlint 可以确保每个开发者都遵循一致的 commit message 规范，从而提高代码的可读性和可维护性。

配置方法：

安装 Commitlint：在项目中执行 npm install --save-dev @commitlint/{cli,config-conventional}。
配置文件：在项目的根目录下创建一个 commitlint.config.js 文件，并在其中指定要使用的规则集。例如，使用常规提交规范：module.exports = { extends: ['@commitlint/config-conventional'] }。
集成到 Git 钩子：将 Commitlint 集成到 Git 钩子中，以便在每次提交时自动检查 commit message。可以使用 Husky 等工具来实现这一功能。

常见问题解决方法：

如果 Commitlint 报错，首先检查是否安装了正确的依赖，并查看报错信息以确定具体问题。报错信息通常会指出 commit message 不符合哪个规则。
可以根据报错信息修改 commit message 或配置 Commitlint 规则来解决问题。

前端监控

前端监控，简单来说就是我们在前端程序中记录一些信息并上报，一般是错误信息，来方便我们及时发现问题并解决问题。除此之外也会有性能监控，用户行为的监控（埋点）等。

对于错误监控: 可以了解一下 Sentry，原理简单来说就是通过 window.onerror 和 window.addEventListener('unhandledrejection', ...) 去分别捕获同步和异步错误，然后通过错误信息和 sourceMap 来定位到源码。

对于性能监控: 可以通过 window.performance、PerformanceObserver 等 API 收集页面性能相关的指标，除此之外，还需要关注接口的响应时间。

收集到信息之后，还要考虑数据上报的方案: 比如使用 navigator.sendBeacon 还是 Fetch、AJAX？是批量上报，实时上报，还是延迟上报？上报的数据格式等等。

CI/CD

一、定义

持续集成（Continuous Integration, CI）和持续部署（Continuous Deployment, CD），主要包括版本控制，代码合并，构建，单测，部署等一系列前端工作流。

CI（Continuous Integration，持续集成）：是一种软件开发实践，它要求开发人员频繁地将代码集成到共享的主干上。每次集成后，都会通过自动化的构建和测试来验证新代码的正确性。这有助于尽早发现错误，减少后期修复的成本。
CD（Continuous Delivery/Continuous Deployment，持续交付/持续部署）：是CI的后续步骤。持续交付指的是频繁地将软件的新版本交付给质量团队或用户以供评审，而持续部署则是指在评审通过后自动将代码部署到生产环境。

二、功能