大厂技术高级前端 Node进阶

点击上方程序员成长指北，关注公众号

回复1，加入高级Node交流群

初始化项目

vscode 里下好插件：eslint，prettier，stylelint
官网模版创建项目：pnpm create vite react-starter \--template react-swc-ts
安装依赖：pnpm i
后面有可能遇到 ts 类型错误，可以提前安装一个pnpm i @types/node \-D

配置 npm 使用淘宝镜像

配置npmrc

registry = "https://registry.npmmirror.com/"

配置 node 版本限制提示

package.json 中配置

"engines": { "node": ">=16.0.0" },

配置 eslint 检查代码规范

eslint 处理代码规范,prettier 处理代码风格 eslint 选择只检查错误不处理风格，这样 eslint 就不会和 prettier 冲突 react 官网有提供一个 hook 的 eslint (eslint-plugin-react-hooks)，用处不大就不使用了

安装：pnpm i eslint \-D
生成配置文件：eslint \--init（如果没eslint,可以全局安装一个，然后使用npx eslint --init）

- To check syntax and find problems  //这个选项是eslint默认选项，这样就不会和pretter起风格冲突
- JavaScript modules (import/export)
- React
- YES
- Browser
- JSON
- Yes
- pnpm

配置eslintrc.json->rules里配置不用手动引入 react，和配置不可以使用 any
注意使用 React.FC 的时候如果报错说没有定义 props 类型，那需要引入一下 react

"rules": {
 //不用手动引入react
 "react/react-in-jsx-scope": "off",
 //使用any报错
 "@typescript-eslint/no-explicit-any": "error",
}

工作区配置.vscode>settings.json，配置后 vscode 保存时自动格式化代码风格

比如写了一个 var a = 100,会被自动格式化为 const a = 100

{
 "editor.codeActionsOnSave": {
 // 每次保存的时候将代码按照 eslint 格式进行修复
 "source.fixAll.eslint": true,
 //自动格式化
 "editor.formatOnSave": true
 }
}

配置.eslintignore，eslint 会自动过滤 node_modules

dist

掌握eslint格式化命令，后面使用 lint-staged 提交代码的时候需要配置

为什么上面有 vscode 自动 eslint 格式化，还需要命令行: 因为命令行能一次性爆出所有警告问题，便于找到位置修复

npx eslint . --fix//用npx使用项目里的eslint,没有的话也会去使用全局的eslint
eslint . --fix //全部类型文件
eslint . --ext .ts,.tsx --fix //--ext可以指定文件后缀名s

eslintrc.json 里配置

"env": {
 "browser": true,
 "es2021": true,
 "node": true // 因为比如配置vite的时候会使用到
},

配置 prettier 检查代码风格

prettier 格式化风格，因为使用 tailwind，使用 tailwind 官方插件

安装：pnpm i prettier prettier-plugin-tailwindcss \-D
配置.prettierrc.json

注释要删掉，prettier 的配置文件 json 不支持注释

{
 "singleQuote": true, // 单引号
 "semi": false, // 分号
 "trailingComma": "none", // 尾随逗号
 "tabWidth": 2, // 两个空格缩进
 "plugins": ["prettier-plugin-tailwindcss"] //tailwind插件
}

配置.prettierignore

dist
pnpm-lock.yaml

配置.vscode>settings.json，配置后 vscode 保存时自动格式化代码风格

{
 "editor.codeActionsOnSave": {
   // 每次保存的时候将代码按照 eslint 格式进行修复
   "source.fixAll.eslint": true
 },
 //自动格式化
 "editor.formatOnSave": true,
 //风格用prettier
 "editor.defaultFormatter": "esbenp.prettier-vscode"
}

掌握prettier命令行

可以让之前没有格式化的错误一次性暴露出来

npx prettier --write .//使用Prettier格式化所有文件

配置 husky 使用 git hook

记得要初始化一个 git 仓库，husky 能执行 git hook，在 commit 的时候对文件进行操作

安装

sudo pnpm dlx husky-init

pnpm install

npx husky add .husky/commit-msg 'npx \--no \-- commitlint \--edit "$1"'，commit-msg 使用 commitlint

npx husky add .husky/pre-commit "npm run lint-staged"，pre-commit 使用 lint-staged

配置 commitlint 检查提交信息

提交规范参考：www.conventionalcommits.org/en/v1.0.0/^[1]

安装pnpm i @commitlint/cli @commitlint/config-conventional \-D
配置.commitlintrc.json

{ extends: ['@commitlint/config-conventional'] }

配置 lint-staged 增量式检查

安装pnpm i \-D lint-staged
配置package.json

"scripts": {
 "dev": "vite",
 "build": "tsc && vite build",
 "preview": "vite preview",
 "prepare": "husky install",
 "lint-staged": "npx lint-staged"//新增，对应上面的husky命令
},

配置.lintstagedrc.json

{
 "*.{ts,tsx,json}": ["prettier --write", "eslint --fix"],
 "*.css": ["stylelint --fix", "prettier --write"]
}

配置 vite（代理/别名/drop console 等）

如果有兼容性考虑，需要使用 legacy 插件，vite 也有 vscode 插件，也可以下载使用

一些方便开发的配置

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
 esbuild: {
   drop: ['console', 'debugger']
 },
 css: {
   // 开css sourcemap方便找css
   devSourcemap: true
 },
 plugins: [react()],
 server: {
   // 自动打开浏览器
   open: true，
   proxy: {
     '/api': {
       target: 'https://xxxxxx',
       changeOrigin: true,
       rewrite: (path) => path.replace(/^\/api/, '')
     }
   }
 },
 resolve: {
   // 配置别名
   alias: { '@': path.resolve(__dirname, './src') }
 },
 //打包路径变为相对路径,用liveServer打开,便于本地测试打包后的文件
 base: './'
})

配置打包分析，用 legacy 处理兼容性

pnpm i rollup-plugin-visualizer \-D

pnpm i @vitejs/plugin-legacy \-D，实际遇到了再看官网用

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import { visualizer } from 'rollup-plugin-visualizer'
import legacy from '@vitejs/plugin-legacy'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
 css: {
   // 开css sourcemap方便找css
   devSourcemap: true
 },
 plugins: [
   react(),
   visualizer({
     open: false // 打包完成后自动打开浏览器，显示产物体积报告
   }),
   //考虑兼容性，实际遇到了再看官网用
   legacy({
     targets: ['ie >= 11'],
     additionalLegacyPolyfills: ['regenerator-runtime/runtime']
   })
 ],
 server: {
   // 自动打开浏览器
   open: true
 },
 resolve: {
   // 配置别名
   alias: { '@': path.resolve(__dirname, './src') }
 },
 //打包路径变为相对路径,用liveServer打开,便于本地测试打包后的文件
 base: './'
})

如果想手机上看网页，可以pnpm dev \--host
如果想删除 console，可以按h去 help 帮助，再按c就可以 clear console

配置 tsconfig

tsconfig.json 需要支持别名

{
 "compilerOptions": {
   "target": "ESNext",
   "useDefineForClassFields": true,
   "lib": ["DOM", "DOM.Iterable", "ESNext"],
   "allowJs": false,
   "skipLibCheck": true,
   "esModuleInterop": false,
   "allowSyntheticDefaultImports": true,
   "strict": true,
   "forceConsistentCasingInFileNames": true,
   "module": "ESNext",
   "moduleResolution": "Node",
   "resolveJsonModule": true,
   "isolatedModules": true,
   "noEmit": true,
   "jsx": "react-jsx",
   "baseUrl": "./",
   "paths": {
     "@/*": ["src/*"]
   }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

配置 router

安装：pnpm i react-router-dom
配置router->index.ts

import { lazy } from 'react'
import { createBrowserRouter } from 'react-router-dom'
const Home = lazy(() => import('@/pages/home'))
const router = createBrowserRouter([
 {
   path: '/',
   element: <Home></Home>
 }
])
export default router

配置main.tsx

import { RouterProvider } from 'react-router-dom'
import ReactDOM from 'react-dom/client'
import './global.css'
import router from './router'
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
 <RouterProvider router={router} />
)

配置 zustand 状态管理

安装pnpm i zustand
store->index.ts

import { create } from 'zustand'
interface appsState {
 nums: number
 setNumber: (nums: number) => void
}
const useAppsStore = create<appsState>((set) => ({
 nums: 0,
 setNumber: (num) => {
   return set(() => ({
     nums: num
   }))
 }
}))
export default useAppsStore

使用方法

import Button from '@/comps/custom-button'
import useAppsStore from '@/store/app'
const ZustandDemo: React.FC = () => {
 const { nums, setNumber } = useAppsStore()
 const handleNum = () => {
   setNumber(nums + 1)
 }
 return (
   <div className="p-10">
     <h1 className="my-10">数据/更新</h1>
       <Button click={handleNum}>点击事件</Button>
     <h1 className="py-10">{nums}</h1>
   </div>
 )
}
export default ZustandDemo

配置 antd

新版本的 antd，直接下载就可以用，如果用到它的图片再单独下载pnpm i antd
注意 antd5 版本的 css 兼容性不好，如果项目有兼容性要求，需要去单独配置

配置 Tailwind css

pnpm i tailwindcss autoprefixer postcss

tailwind.config.cjs

// 打包后会有1kb的css用不到的，没有影响
// 用了antd组件关系也不大，antd5的样式是按需的
/** @type {import('tailwindcss').Config} */
module.exports = {
 darkMode: 'class',
 content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
 theme: {
 extend: {
 // colors: {
 //   themeColor: '#ff4132',
 //   textColor: '#1a1a1a'
 // },
 // 如果写自适应布局，可以指定设计稿为1000px,然后只需要写/10的数值
 // fontSize: {
 //   xs: '3.3vw',
 //   sm: '3.9vw'
 // }
 }
 },
 plugins: []
}

postcss.config.cjs

module.exports = {
 plugins: {
 tailwindcss: {},
 autoprefixer: {}
 }
}

我喜欢新建一个 apply.css 引入到全局

@tailwind base;
@tailwind components;
@tailwind utilities;
.margin-center {
 @apply mx-auto my-0;
}
.flex-center {
 @apply flex justify-center items-center;
}
.absolute-center {
 @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
}

封装 fetch 请求

这个封装仅供参考，TS 类型有点小问题

// 可以传入这些配置
interface BaseOptions {
 method?: string
 credentials?: RequestCredentials
 headers?: HeadersInit
 body?: string | null
}
// 请求方式
type HttpMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE' | 'HEAD'
// 第一层出参
interface ResponseObject {
 ok: boolean
 error: boolean
 status: number
 contentType: string | null
 bodyText: string
 response: Response
}
// 请求头类型
type JSONHeader = {
 Accept: string
 'Content-Type': string
}
// 创建类
class Request {
 private baseOptions: BaseOptions = {}
 // 根据传入的 baseOptions 做为初始化参数
 constructor(options?: BaseOptions) {
   this.setBaseOptions(options || {})
 }
 public setBaseOptions(options: BaseOptions): BaseOptions {
   this.baseOptions = options
   return this.baseOptions
 }
 // 也提供获取 baseOption 的方法
 public getBaseOptions(): BaseOptions {
   return this.baseOptions
 }
 // 核心请求 T 为入参类型，ResponseObject 为出参类型
 public request<T>(
   method: HttpMethod,
   url: string,
   data?: T, //支持使用get的时候配置{key,value}的query参数
   options?: BaseOptions //这里也有个 base 的 method
 ): Promise<ResponseObject> {
   // 默认 baseOptions
   const defaults: BaseOptions = {
     method
     // credentials: 'same-origin'
   }
   // 收集最后要传入的配置
   const settings: BaseOptions = Object.assign(
   {},
   defaults,
   this.baseOptions,
   options
 )
 // 如果 method 格式错误
 if (!settings.method || typeof settings.method !== 'string')
 throw Error('[fetch-json] HTTP method missing or invalid.')
 // 如果 url 格式错误
 if (typeof url !== 'string')
 throw Error('[fetch-json] URL must be a string.')
 // 支持大小写
 const httpMethod = settings.method.trim().toUpperCase()
 // 如果是GET
 const isGetRequest = httpMethod === 'GET'
 // 请求头
 const jsonHeaders: Partial<JSONHeader> = { Accept: 'application/json' }
 // 如果不是 get 设置请求头
 if (!isGetRequest && data) jsonHeaders['Content-Type'] = 'application/json'
 // 收集最后的headers配置
 settings.headers = Object.assign({}, jsonHeaders, settings.headers)
 // 获取query参数的key
 const paramKeys = isGetRequest && data ? Object.keys(data) : []
 // 获取query参数的值
 const getValue = (key: keyof T) => (data ? data[key] : '')
 // 获取query key=value
 const toPair = (key: string) =>
 key + '=' + encodeURIComponent(getValue(key as keyof T) as string)
 // 生成 key=value&key=value 的query参数
 const params = () => paramKeys.map(toPair).join('&')
 // 收集最后的 url 配置
 const requestUrl = !paramKeys.length
 ? url
 : url + (url.includes('?') ? '&' : '?') + params()
 // get没有body
 settings.body = !isGetRequest && data ? JSON.stringify(data) : null
 // 做一层res.json()
 const toJson = (value: Response): Promise<ResponseObject> => {
 // 拿到第一次请求的值
 const response = value
 const contentType = response.headers.get('content-type')
 const isJson = !!contentType && /json|javascript/.test(contentType)
 const textToObj = (httpBody: string): ResponseObject => ({
   ok: response.ok,
   error: !response.ok,
   status: response.status,
   contentType: contentType,
   bodyText: httpBody,
   response: response
 })
 const errToObj = (error: Error): ResponseObject => ({
   ok: false,
   error: true,
   status: 500,
   contentType: contentType,
   bodyText: 'Invalid JSON [' + error.toString() + ']',
   response: response
 })
 return isJson
   ? // 如果是json,用json()
   response.json().catch(errToObj)
   : response.text().then(textToObj)
 }
   // settings做一下序列化
   const settingsRequestInit: RequestInit = JSON.parse(
   JSON.stringify(settings)
 )
   // 最终请求fetch,再通过then就能取到第二层res
   return fetch(requestUrl, settingsRequestInit).then(toJson)
 }
   public get<T>(
   url: string,
   params?: T,
   options?: BaseOptions
 ): Promise<ResponseObject> {
   return this.request<T>('GET', url, params, options)
 }
 public post<T>(
   url: string,
   resource: T,
   options?: BaseOptions
 ): Promise<ResponseObject> {
   return this.request<T>('POST', url, resource, options)
 }
 public put<T>(
   url: string,
   resource: T,
   options?: BaseOptions
 ): Promise<ResponseObject> {
   return this.request<T>('PUT', url, resource, options)
 }
 public patch<T>(
   url: string,
   resource: T,
   options?: BaseOptions
 ): Promise<ResponseObject> {
   return this.request<T>('PATCH', url, resource, options)
 }
 public delete<T>(
   url: string,
   resource: T,
   options?: BaseOptions
 ): Promise<ResponseObject> {
   return this.request<T>('DELETE', url, resource, options)
 }
}
const request = new Request()
export { request, Request }

如果用 axios 请求

request.ts

import axios from 'axios'
import { AxiosInstance } from 'axios'
import { errorHandle, processData, successHandle } from './resInterceptions'
import { defaultRequestInterception } from './reqInterceptions'
const TIMEOUT = 5 * 1000
class Request {
 instance: AxiosInstance
 constructor() {
   this.instance = axios.create()
   this.init()
 }
 private init() {
   this.setDefaultConfig()
   this.reqInterceptions()
   this.resInterceptions()
 }
 private setDefaultConfig() {
   this.instance.defaults.baseURL = import.meta.env.VITE_BASE_URL
   this.instance.defaults.timeout = TIMEOUT
 }
 private reqInterceptions() {
   this.instance.interceptors.request.use(defaultRequestInterception)
 }
 private resInterceptions() {
   this.instance.interceptors.response.use(processData)
   this.instance.interceptors.response.use(successHandle, errorHandle)
 }
}
export default new Request().instance

reqInterceptions.ts

import type { InternalAxiosRequestConfig } from 'axios'
const defaultRequestInterception = (config: InternalAxiosRequestConfig) => {
 // TODO: 全局请求拦截器: 添加token
 return config
}
export { defaultRequestInterception }

resInterceptions.ts

import { AxiosError, AxiosResponse } from 'axios'
import { checkStatus } from './checkStatus'
const processData = (res: AxiosResponse) => {
 // TODO:统一处理数据结构
 return res.data
}
const successHandle = (res: AxiosResponse) => {
 // TODO:处理一些成功回调，例如请求进度条
 return res.data
}
const errorHandle = (err: AxiosError) => {
 if (err.status) checkStatus(err.status)
 else return Promise.reject(err)
}
export { processData, successHandle, errorHandle }

checkStatus.ts

export function checkStatus(status: number, msg?: string): void {
 let errMessage = ''
 switch (status) {
   case 400:
     errMessage = `${msg}`
     break
   case 401:
     break
   case 403:
     errMessage = ''
     break
   // 404请求不存在
   case 404:
     errMessage = ''
     break
   case 405:
     errMessage = ''
     break
   case 408:
     errMessage = ''
     break
   case 500:
     errMessage = ''
     break
   case 501:
     errMessage = ''
     break
   case 502:
     errMessage = ''
     break
   case 503:
     errMessage = ''
     break
   case 504:
     errMessage = ''
     break
   case 505:
     errMessage = ''
     break
   default:
 }
 if (errMessage) {
   // TODO:错误提示
   // createErrorModal({title: errMessage})
 }
}`` 

api.ts

```ts
import request from '@/services/axios/request'
import { ReqTitle } from './type'
export const requestTitle = (): Promise<ReqTitle> => {
 return request.get('/api/一个获取title的接口')
}

type.ts

export type ReqTitle = {
 title: string
}

配置 mobx（可不用）

安装pnpm i mobx mobx-react-lite
配置model->index.ts

import { makeAutoObservable } from 'mobx'
const store = makeAutoObservable({
  count: 1,
  setCount: (count: number) => {
    store.count = count
  }
})
export default store

使用方法举个 🌰

import store from '@/model'
import { Button } from 'antd'
import { observer, useLocalObservable } from 'mobx-react-lite'
const Home: React.FC = () => {
 const localStore = useLocalObservable(() => store)
 return (
   <div>
     <Button>Antd</Button>
     <h1>{localStore.count}</h1>
   </div>
 )
}
export default observer(Home)

配置 changelog（可不用）

pnpm i conventional-changelog-cli \-D

第一次先执行conventional-changelog \-**p** angular \-**i** CHANGELOG.md \-s \-r 0全部生成之前的提交信息

配置个脚本，版本变化打 tag 的时候可以使用

"scripts": {
 "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
}

配置 editorConfig 统一编辑器（可不用）

editorConfig，可以同步编辑器差异，其实大部分工作 prettier 做了，需要下载 editorConfig vscode 插件有编辑器差异的才配置一下，如果团队都是 vscode 就没必要了

配置editorconfig

#不再向上查找.editorconfig
root = true
# *表示全部文件
[*]
#编码
charset = utf-8
#缩进方式
indent_style = space
#缩进空格数
indent_size = 2
#换行符lf
end_of_line = lf

配置 stylelint 检查 CSS 规范（可不用）

stylelint 处理 css 更专业,但是用了 tailwind 之后用处不大了

安装：pnpm i \-D stylelint stylelint-config-standard
配置.stylelintrc.json

{
 "extends": "stylelint-config-standard"
}

配置.vscode>settings.json，配置后 vscode 保存时自动格式化 css

{
 "editor.codeActionsOnSave": {
   "source.fixAll.eslint": true, // 每次保存的时候将代码按照 eslint 格式进行修复
   "source.fixAll.stylelint": true //自动格式化stylelint
 },
 "editor.formatOnSave": true, //自动格式化
 "editor.defaultFormatter": "esbenp.prettier-vscode" //风格用prettier
}

掌握stylelint命令行

npx stylelint "**/*.css" --fix//格式化所有css,自动修复css

下面是 h5 项目（可不用）

配置`vconsole`（h5）

安装pnpm i vconsole \-D
main.tsx里新增

import VConsole from 'vconsole'
new VConsole({ theme: 'dark' })

antd 换成 mobile antd（h5）

pnpm remove antd
pnpm add antd-mobile

配置 postcss-px-to-viewport（废弃）

把蓝湖设计稿尺寸固定为 1000px(100px我试过蓝湖直接白屏了)，然后你点出来的值比如是 77px，那你只需要写 7.7vw 就实现了自适应布局，就不再需要这个插件了
安装：pnpm i postcss-px-to-viewport \-D
配置postcss.config.cjs

module.exports = {
 plugins: {
 'postcss-px-to-viewport': {
   landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
   landscapeUnit: 'vw', // 横屏时使用的单位
   landscapeWidth: 568, // 横屏时使用的视口宽度
   unitToConvert: 'px', // 要转化的单位
   viewportWidth: 750, // UI设计稿的宽度
   unitPrecision: 5, // 转换后的精度，即小数点位数
   propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
   viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
   fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
   selectorBlackList: ['special'], // 指定不转换为视窗单位的类名，
   minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
   mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
   replace: true, // 是否转换后直接更换属性值
   exclude: [/node_modules/] // 设置忽略文件，用正则做目录名匹配
  }
 }
}

参考资料

[1]

https://www.conventionalcommits.org/en/v1.0.0/

关于本文

作者：imber

https://juejin.cn/post/7241875166887444541

最后

Node 社群

我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加考拉好友回复「Node」即可。

“分享、点赞、在看” 支持一波

项目规范：让你的代码更上一层楼

大厂技术 高级前端 Node进阶