当前位置：首页 > 科技 > 软件

前端工程化小记

来源：责编：时间：2023-09-18 21:41:19 218观看

导读1.引言工作中，我们是否经常遇到以下情况：我们是否发现接手其他同事的代码非常痛苦，比如：缩进，换行等等代码风格这些一度让人浑身难受某个同事提了经常提语法报错的代码，语法报错只能用肉眼一个个review代码，完全没有提示同事

1.引言

工作中，我们是否经常遇到以下情况：

我们是否发现接手其他同事的代码非常痛苦，比如：缩进，换行等等代码风格这些一度让人浑身难受
某个同事提了经常提语法报错的代码，语法报错只能用肉眼一个个review代码，完全没有提示
同事每个人写的commit风格都不一样，也有偷懒的，一个单词搞定的，但是也不描述本次更改是属于什么范畴？比如：是加功能？是代码优化？还是修复bug？还是修改webpack配置？还是修改工具链等等
如果是monorepo的仓库，里面有很多项目，commit一顿乱写，完全不管改的哪个项目，是不是很崩溃？

关于代码语法检查、代码格式化、commit注释规范、代码编译等等这些工作量繁杂且巨大的苦力活，除非你不想把人当马用，那还是交给机器去做，是吗？

前端领域早已不是以前的纯js、jquery 时代，模块化、工程化也成为了前端领域的追求，这样才能保证前端程序的可读性，可维护性，健壮性等等

2.背景

前端工程化已经发展了有些年月了，大量提高效率的包如雨后春笋般涌出。所以作为小前端的我也忍不住去探索一番，毕竟谁也不想疯狂加班，被当作马使，也想下早班开启简单开心的生活

本文旨在记录探索前端基本工程化的实践过程，方便自己以后翻阅，请轻喷(ps: 这篇文章聚焦代码检查，代码美化，commit规范，其中有借助chatgpt)

项目基本技术选型为：react + ts，所以将以此为基础展开前端工程化基本配置

3.Git钩子：husky

husky 是一个用于在 Git 钩子中运行命令的工具，它能够在代码提交或推送等特定事件中自动触发指定的命令。通过 husky，你可以在代码提交前、提交后、推送前等场景下运行脚本，以进行代码风格检查、单元测试、构建等操作

安装如下：

下载husky的npm包
初始化husky
配置npm install时自动初始化husky

用快捷命令完成上面的安装步骤

# npmnpx husky-init && npm install# yarnyarn dlx husky-init --yarn2 && yarn#pnpmpnpm dlx husky-init && pnpm install

4.文件过滤工具：lint-staged

lint-staged是一个用于在 git 暂存文件上运行指定命令的工具。它可以帮助你在提交代码前，只对即将提交的文件进行代码风格检查、格式化、静态分析等操作，以便在代码提交之前保持代码的质量和一致性

基本使用如下：

安装依赖

# npmnpm install lint-staged --save-dev#yarn yarn add lint-staged --dev#pnpmpnpm add lint-staged --save-dev

修改package.json文件如下：

{  "scripts": {    "lint": "eslint src"  },  "lint-staged": {    "src/**/*.{ts,tsx}": [      "npm run lint", // 运行自定义的 lint 脚本      "git add" // 添加修复后的文件到暂存区    ]  }}

以上配置表示：对于 src 目录下的所有后缀为 ts 和 tsx 的文件，在提交前会运行 npm run lint 命令来进行语法检查，然后将修复后的文件添加到暂存区

实际开发时，lint-staged 一般会配合 pre-commit 钩子进行 commit 之前的动作，所以我们替换 pre-commit 钩子内容如下：

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

5.commit注释规范：commitlint

commitlint 是一个用于规范化 Git 提交消息的工具。它帮助团队确保每个提交消息都符合统一的规范，以提高代码仓库的可读性和可维护性

这里直接展示commitlint搭配husky一起使用

安装相关依赖

# npm  npm install @commitlint/cli @commitlint/config-conventional --save-dev  # yarn  yarn add @commitlint/cli @commitlint/config-conventional --dev  # pnpm  pnpm add @commitlint/cli @commitlint/config-conventional --save-dev

使用 husky 增加 commit-msg 钩子

npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'

在package.json文件里面commitlint信息，默认使用commitlint提供的11注释类型(ps: 你可以自定义，比如下方的ui、version)

{  "commitlint": {    "extends": [      "@commitlint/config-conventional"    ],    "rules": {      "type-enum": [        2,        "always",        [          "build",          "chore",          "ci",          "docs",          "feat",          "fix",          "perf",          "refactor",          "revert",          "style",          "test",          "ui",          "version"        ]      ]    }  }}

commitlint提供的11注释类型解释如下：

build: 编译相关的修改, 例如：发布版本、项目构建工具改动等(例如：glup、rollup、webpack、vite、turbo等工具)
chore: 杂项修改(例如：改变构建流程、增加依赖库等)
ci: 持续集成相关修改(例如: github-action、gitlab-ci/cd等)
docs: 文档修改
feat: 新增功能
fix: 修复bug
perf: 优化(例如: 提升性能、体验等)
refactor: 代码重构
revert: 回滚版本
style: 代码格式修改
test: 测试用例修改

6.代码检查

代码检查借助了eslint, typescript-eslint

eslint是一个用于检查和修复 JavaScript 代码错误、风格和质量问题的工具。它可以帮助开发人员和团队在编码过程中遵循一致的编码规范，提高代码可读性、可维护性和质量

typescript-eslint是一个用于对 TypeScript 代码进行检查和修复的工具。它基于eslint，提供了一套规则和插件，可以检查和修复 TypeScript 代码中的错误、风格和质量问题

综上所诉，需要开发环境下安装如下包：

eslint
eslint-plugin-react-hooks
eslint-plugin-react-refresh
@typescript-eslint/parser
@typescript-eslint/eslint-plugin

# npmnpm install eslint eslint-plugin-react-hooks eslint-plugin-react-refresh @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev# yarnyarn add eslint eslint-plugin-react-hooks eslint-plugin-react-refresh @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev# pnpmpnpm add eslint eslint-plugin-react-hooks eslint-plugin-react-refresh @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

eslint基本使用步骤如下：

安装eslint：在项目根目录下运行命令 npm install eslint --save-dev 或 yarn add eslint --dev 或 pnpm add eslint --save-dev，将eslint作为开发依赖安装到项目中
初始化eslint配置文件：在项目根目录下运行命令 eslint --init，根据提示选择配置选项，配置文件（通常为.eslintrc或.eslintrc.json）将会自动生成
添加规则和插件：在生成的配置文件中，可以根据项目需要添加或修改规则，以及引入需要的插件
运行eslint：在命令行中运行 eslint yourfile.js 或 eslint . ，其中yourfile.js为需要检查的文件名或目录。eslint将会根据配置文件对代码进行检查，并输出错误或警告信息
自动修复：运行 eslint --fix yourfile.js 或 eslint --fix . 可以尝试自动修复一部分可修复的问题

typescript-eslint基本使用步骤如下：

安装typescript-esLint：在项目根目录下运行以下命令

#npm npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev# yarnyarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev#pnpmpnpm add @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

配置eslint和@typescript-eslint插件：在生成的eslint配置文件中，需要指定解析器为@typescript-eslint/parser，并使用@typescript-eslint/eslint-plugin提供的规则和插件

eslint配置文件如下(以.eslintrc为例)：

module.exports = {  root: true,  env: { browser: true, es2020: true },  extends: [    'eslint:recommended',    'plugin:@typescript-eslint/recommended',    'plugin:react-hooks/recommended',  ],  ignorePatterns: ['dist', '.eslintrc.cjs'],  parser: '@typescript-eslint/parser',  plugins: ['react-refresh'],  rules: {    'react-refresh/only-export-components': [      'warn',      { allowConstantExport: true },    ],    '@typescript-eslint/ban-ts-comment': 'off'  }}

以下为结合 lint-staged 配置的代码检查命令：

{  "scripts": {    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",    "lint:fix": "eslint . --ext ts,tsx --fix",  },  "lint-staged": {    "*.(ts|tsx)": [      "eslint --quiet"    ]  }}

7.代码美化：prettier

prettier是一个代码格式化工具，它可以自动调整代码的格式，使其符合统一的风格规范

基本使用如下：

安装依赖

# npm npm install prettier --save-dev# yarnyarn add prettier --dev#pnpmpnpm add prettier --save-dev

配置prettier，可以使用 .prettierrc 文件或 package.json 文件中的 prettier 字段，下面以 package.json 为例：

{  "prettier": {    "trailingComma": "all",    "arrowParens": "always",    "printWidth": 120  }}

实际应用时会在 commit 之前进行美化代码，以下为结合 lint-staged 配置的代码检查+代码美化命令：

{  "prettier": {    "trailingComma": "all",    "arrowParens": "always",    "printWidth": 120  },  "lint-staged": {    "*.(ts|tsx)": [      "eslint --quiet"    ],    "*.(ts|tsx|json|html)": [      "prettier --write"    ]  }}

本文链接：http://www.28at.com/showinfo-26-10452-0.html前端工程化小记

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： Serverless vs Containers：哪个适合您的业务？

下一篇：算法和数据结构：解析与应用

标签：

热门焦点

石头自清洁扫拖机器人G10S评测：多年黑科技集大成之作懒人终极福音

科技圈经常能看到一个词叫“缝合怪”，用来形容那些把好多功能或者外观结合在一起的产品，通常这样的词是贬义词，但如果真的是产品缝合的好、缝合的实用的话，那它就成了中性词，今
K6：面向开发人员的现代负载测试工具

K6 是一个开源负载测试工具，可以轻松编写、运行和分析性能测试。它建立在 Go 和 JavaScript 之上，它被设计为功能强大、可扩展且易于使用。k6 可用于测试各种应用程序，包括 Web
如何通过Python线程池实现异步编程？

线程池的概念和基本原理线程池是一种并发处理机制，它可以在程序启动时创建一组线程，并将它们置于等待任务的状态。当任务到达时，线程池中的某个线程会被唤醒并执行任务，执行完任
三万字盘点 Spring 九大核心基础功能

大家好，我是三友~~今天来跟大家聊一聊Spring的9大核心基础功能。话不多说，先上目录：图片友情提示，本文过长，建议收藏，嘿嘿嘿！一、资源管理资源管理是Spring的一个核心的基础功能，不
拼多多APP上线本地生活入口，群雄逐鹿万亿市场

Tech星球（微信ID：tech618）文 | 陈桥辉 Tech星球独家获悉，拼多多在其APP内上线了“本地生活”入口，位置较深，位于首页的“充值中心”内，目前主要售卖美食相关的
三星获批量产iPhone 15全系屏幕：苹果史上最惊艳直屏

按照惯例，苹果将继续在今年9月举办一年一度的秋季新品发布会，有传言称发布会将于9月12日举行，届时全新的iPhone 15系列将正式与大家见面，不出意外的话
AI芯片初创公司Tenstorrent获三星和现代1亿美元投资

Tenstorrent是一家由芯片行业资深人士Jim Keller领导的加拿大初创公司，专注于开发人工智能芯片，该公司周三表示，已经从现代汽车集团和三星投资基金等
联想小新Pad Pro 12.6将要推出，搭载高通骁龙 870 处理器

联想小新Pad Pro 12.6将于秋季新品会上推出，官方按照惯例直接在发布会前给出了机型的所有参数。联想小新 Pad Pro 12.6 将搭载高通骁龙 870 处理器，重量为 5
上海举办人工智能大会活动，建设人工智能新高地

人工智能大会在上海浦江两岸隆重拉开帷幕，人工智能新技术、新产品、新应用、新理念集中亮相。8月30日晚，作为大会的特色活动之一的上海人工智能发展盛典人工