1 前置准备
- 一个正常运行的前端项目
- 一个准备好的git仓库
2 规范
2.1 代码规范
2.1.1 eslint
eslint乃老生常谈，配置上也较为简单
pnpm i eslint --save-dev
pnpm init @eslint/config
基于上边的步骤，我们生成了基础配置；
由于我的示例项目使用Next.js框架构建，需要在extends中额外配置"next"。
同时个人建议配置react-hooks插件
2.1.2 prettier
prettier是格式化工具，我个人使用上更偏爱使用prettier做代码格式化，如果你在上一步选择了eslint格式化大可忽略
pnpm i prettier --save-dev
我们需要在根目录配置.prettierrc;
这是我配置的规范，以下指令可以快捷生成
echo \{
\"semi\": true,\"tabWidth\": 2,\"trailingComma\": \"es5\",\"singleQuote\": false,\"arrowParens\": \"always\"\} > .prettierrc
同时建议更新eslint的配置，增加prettier解决冲突
pnpm i eslint-config-prettier --save-dev
2.1.3 stylelint
pnpm install --save-dev stylelint stylelint-config-standard
stylelint可以帮助我们检查以及格式化样式文件
{
"extends": ["stylelint-config-standard"],"rules": {
"indentation": 4,"no-descending-specificity": null}
}
由于项目启用了scss，需要额外配置
pnpm i -D postcss postcss-scss
2.2 git规范
git规范对于团队开发是非常有利的，在版本出现问题时可以清晰的定位;
2.2.0 husky的配置
做git规范，前置需要配置一下husky，后续的内容都是基于husky
pnpm i husky --save-dev
npm set-script postinstall "npx husky install"
npx husky install
这里有两个地方是可能存在问题的：
npm set-script postinstall "npx husky install"：
>> 为package.json文件添加postinstall的脚本，该钩子会在npm运行install命令之后运行
npx husky install：
>> 该命令的意义是初始化husky，将 git hooks 钩子交由，husky执行，缺失这里即便配置好后边的命令也不会生效
同时补充一点：husky install命令必须在.git同目录下运行，如果你的package.json和.git不在同一目录，这是官方的解决方案：
补一手官网链接「https://typicode.github.io/husky」
2.2.1 pre-commit
在代码commit前运行，通过钩子函数，可以判断提交的代码是否符合规范，我们可以在这里做强制格式化
pre-commit可以配合上边制定的eslint与prettier规则运行，我这里的期望是，对于git暂存区的内容做自动规范，所以这里需要用到lint-staged：
pnpm i lint-staged --save-dev
npx husky add .husky/pre-commit "npx lint-staged"
同时在根目录下创建.lintstagedrc，这是我的配置：
{
"*.{js,jsx,ts,tsx}": ["npx prettier --write", "npx eslint --fix"],"*.{css,less,scss}": ["npx prettier --write", "npx stylelint --fix"],"*.{json,md}": ["npx prettier --write"]
}
这样一来，在我们commit之前，代码会自动对暂存区指定文件进行格式化
2.2.2 commit-msg
在pre-commit之后运行，会检查commit的内容，做commit规范
pnpm i commitlint --save-dev
pnpm i @commitlint/config-conventional --save-dev
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
@commitlint/config-conventional是Anglar的提交规范
同时在根目录新建.commitlintrc.js
module.exports = {
extends: ["@commitlint/config-conventional"]};
2.2.3 commit助手
commit助手可以帮助我们遵循
commit-msg
commit助手这里推荐
- commitizen
- cz-conventional-changelog
- commitlint-config-cz
- cz-customizable
这些包，但是具体的使用可以自行探索，我这里是自己写的，在后边可以看到。
2.2.4 pre-push
pre-push可以在代码push之前运行一些脚本，目前的实践就是在push行为之前做本地编包、测试
npx husky add .husky/pre-push "npm run build && npm test"
3 单元测试「可选」
单元测试中最出名的当属Jest
我这里使用的则是Jest和ReactTestingLibrary
3.1 Jest && ReactTestingLibrary
3.1.1 初始化与安装
项目中使用了ts，需要为Jest额外准备babel和typescript环境包
pnpm i jest -D
pnpm i -D babel-jest @babel/core @babel/preset-env @babel/preset-typescript
pnpm i -D @babel/preset-react react-test-renderer @types/react-test-renderer identity-obj-proxy
pnpm i ts-jest @types/jest -D
接着生成基本配置文件进行初始化
npx ts-jest config:init // ts版本
npx jest --init // js版本npm set-script test "npx jest"
配置jest.config.js文件：
module.exports = {
collectCoverageFrom: ["**/*.{js,jsx,ts,tsx}","!**/*.d.ts","!**/node_modules/**",],moduleNameMapper: {
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy","^.+\\.(css|sass|scss)$": "<rootDir>/__mocks__/styleMock.js","^.+\\.(jpg|jpeg|png|gif|webp|avif|svg)$": `<rootDir>/__mocks__/fileMock.js`,"^@/components/(.*)$": "<rootDir>/components/$1",},setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],testPathIgnorePatterns: ["<rootDir>/node_modules/", "<rootDir>/.next/"],testEnvironment: "jsdom",transform: {
"^.+\\.(js|jsx|ts|tsx)$": ["babel-jest", {
presets: ["next/babel"] }],},transformIgnorePatterns: ["/node_modules/","^.+\\.module\\.(css|sass|scss)$",],
};当然如果使用Next框架，这样写就行：
const nextJest = require('next/jest')const createJestConfig = nextJest({
dir: './',
})
const customJestConfig = {
setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
}module.exports = createJestConfig(customJestConfig)
接着在根目录创建jest.setup.js，内容可以暂时为空
3.1.2 编写第一个React测试用例 with 「ReactTestingLibrary」
安装依赖包
pnpm i -D @testing-library/jest-dom @testing-library/react
在jest.setup.js写入全局配置
import '@testing-library/jest-dom';
写第一个测试用例：
// home.test.tsx
import Home from "../pages/index";
import React from 'react'
import {
render, screen } from '@testing-library/react'it('renders homepage HelloWorld', () => {
render(<Home/>)const helloworld = screen.getByRole('region', {
name: /helloworld/i,})expect(helloworld).toBeInTheDocument()
})
// index.tsx
import type {
NextPage } from "next";
import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.scss";const Home: NextPage = () => {
return (<div className={
styles.container}><Head><title>Create 1 Next App</title><meta name="description" content="Generated by create next app" /><link rel="icon" href="/favicon.ico" /></Head><main><section className={
styles.title} aria-label="helloworld">HelloWorld</section><span className={
styles.logo}><Image src="/vercel.svg" alt="Vercel Logo" width={
72} height={
16} /></span></main></div>);
};export default Home;
测试
同时在此补上官网链接
- 「https://jestjs.io/docs/getting-started 」
- 「https://testing-library.com/docs/react-testing-library/intro 」
建议有问题还是啃文档吧
再补上一些有用的教程 - 「https://juejin.cn/post/7039108357554176037 」
4 持续集成/持续部署CI/CD
目前已知CI/CD一般要用到Docker/k8s Jenkins，通过git action在git更新的时候向服务器做更新操作
这真做起来就是抢运维饭碗了啊喂…
嗯…图方便，并且由于前端这边只有静态界面，我这里没有使用服务器。而是通过腾讯静态托管（类似CDN）完成一键部署测试环境。
注意这样是有缺陷的，包括但不限于缺少回滚机制、在本地编包的风险
可能更多人的诉求是当代码合并到某个分支后，机器能自动帮我执行完打包和部署这两个步骤，如果是这样后边不用看了哈…周末要结束我要歇歇了有机会额外出，不是一篇文章能搞定的
4.1 前置准备
先留一个官网链接「https://console.cloud.tencent.com/tcb/hosting 」
正常注册一个云开发环境就行，可以选择「按量付费」再买资源包，一般来讲日花费不到1元。
注册完毕后可以拿到云开发的环境ID，记下来
接着我们需要开通「新建云开发环境」-「静态页面托管」
同时全局安装腾讯云提供的cli，并登陆
npm i @cloudbase/cli -g --force
tcb login
登陆后做一下开发环境验证：
tcb hosting detail -e {
{
你的环境ID}}
确认已上线
4.2 自定义部署脚本
为了便于使用，我们写一个自定义脚本
- utils.js
const {
blue } = require("chalk");
const {
exec } = require("child_process");
const sys = (command, ...rest) =>new Promise((resolve, reject) => {
exec(command, (err, stdout) => {
if (err) {
reject(err);return;}resolve([stdout, ...rest]);});});module.exports = {
blue,sys,
};
- publish.js
const {
sys, blue } = require("../resources/utils");
const inquirer = require("inquirer");
const ora = require("ora");const publishCli = (envID) => [`tcb hosting deploy ./out ./livestea -e ${
envID}`,
];module.exports = async () => {
const spinner = ora("代码发布中ing...");inquirer.prompt([{
type: "confirm",name: "build",message: "是否先进行静态遍包（默认否）",default: false,},{
type: "list",name: "value",choices: [{
name: "测试环境",value: {
envID: "xxx",url: "xxx",},},new inquirer.Separator("---无授权请不要发布正式环境---"),{
name: "正式环境",value: {
envID: "xxx",url: "xxx",},},],message: "选择发布环境：",},{
type: "confirm",name: "confirm",message: "确认发布？",},]).then((answers) => {
if (!answers.build) {
return answers;}return sys("npm run export").then(() => answers);}).then((answers) => {
const {
confirm, value } = answers;if (!confirm) {
return;}const {
envID, url } = value;const [command] = publishCli(envID);console.log(command);spinner.start();return sys(command, url);}).then(([status, url]) => {
spinner.stop();console.log(status);spinner.text = "代码发布成功";spinner.succeed();return url;}).then((url) => {
console.log(blue(`${
url}?time=${
Date.now()}`));});
};
- main.js
const [command, ...argvs] = process.argv.splice(2);switch (command) {
case "cz":require(`./scripts/commitizen`)(...argvs);break;default:require(`./scripts/${
command}`)(...argvs);break;
}
这样我们就可以通过脚本命令一键部署，记得部署之前要确认是否在本地编包哦～
npm run pub
附件
附件1 cli目录结构
附件2 commit助手自定义
- ora用来加载loading效果
- inquirer用来做命令行交互
- chalk用来给打印信息上色
#! /usr/bin/env node
const inquirer = require("inquirer");
const ora = require("ora");
const precommit = require("./precommit");
const {
yellow } = require("chalk");
const {
errorCodeFunc, errorCode, getError } = require("../resources/error");
const {
sys } = require("../resources/utils");
const {
CUSTOM_ERR_ERROR, CUSTOM_ERR_INFO, CUSTOM_ERR_IGNORED } = errorCode;const commitizen = {
types: [{
value: "feat", name: "feat: 新功能" },{
value: "fix", name: "fix: 修复" },{
value: "docs", name: "docs: 文档变更" },{
value: "style", name: "style: 代码格式(不影响代码运行的变动)" },{
value: "refactor",name: "refactor: 重构(既不是增加feature，也不是修复bug)",},{
value: "perf", name: "perf: 性能优化" },{
value: "test", name: "test: 增加测试" },{
value: "chore", name: "chore: 构建过程或辅助工具的变动" },{
value: "revert", name: "revert: 回退" },{
value: "build", name: "build: 打包" },{
value: "ci", name: "ci: 持续集成修改" },],messages: {
type: "请选择提交类型:",scope: "请输入修改范围(可选):",subject: "请简要描述提交(必填):",body: "请输入详细描述(可选):",footer: "请输入要关闭的issue(可选):",confirmCommit: "确认使用以上信息提交？",},
};
const {
types, messages } = commitizen;module.exports = async () => {
let commit = null;const spinner = ora("代码提交中ing...");precommit().then((e) => {
if (!e.code) {
throw {
code: CUSTOM_ERR_IGNORED };}return inquirer.prompt([{
type: "list",name: "type",message: messages.type,choices: types,loop: false,},{
type: "input",name: "subject",message: messages.subject,},{
type: "input",name: "scope",message: messages.scope,},{
type: "body",name: "body",message: messages.body,},{
type: "footer",name: "footer",message: messages.footer,},]);}).then((answers) => {
const {
subject } = answers;if (!subject) {
throw {
code: CUSTOM_ERR_ERROR,msg: "commit信息中必须包含基本的【描述提交】",};}return answers;}).then(({
type, scope, subject, body, footer }) => {
const _header = `${
type}${
scope ? `(${
scope})` : ""}: ${
subject};`;const _body = `${
body ? "\n" + body : body}`;const _footer = `${
footer ? "\n" + footer : footer}`;return `${
_header}${
_body}${
_footer}`.replaceAll("`", "\\`");}).then((str) => {
console.log(yellow("------------------------"));console.log(str.replaceAll("\\`", "`"));commit = str;console.log(yellow("------------------------"));return inquirer.prompt([{
type: "confirm",name: "confirm",message: messages.confirmCommit,},]);}).then(({
confirm }) => {
if (!confirm) {
throw {
code: CUSTOM_ERR_INFO,msg: "取消提交",};}return;}).then(() => {
const command = `git commit -m "${
commit}"`;console.log(`\n${
command}\n`);spinner.start();return sys(command);}).then(([res]) => {
spinner.stop();console.log(res);spinner.text = "代码提交成功";spinner.succeed();}).catch((e) => {
spinner.stop();errorCodeFunc(e.code ?? getError(e).code, e);spinner.text = "代码提交失败";spinner.start();spinner.fail();return {
code: 0, errMsg: e };});
};总结
写这篇文章一是汇总部分近期学习和了解到的知识，二是希望能完备一下自己的文章库
～～ ? 不可能是防止自己有一天忘了