项目工程化 vite
站长
· 阅读数 50
一、项目工程化
1.1初始环境
- node v18.17.0
- pnpm 8.7.5
- vite 4.4.5
1.1.1安装pnpm
pnpm:performant npm ，意味“高性能的 npm”。pnpm由npm/yarn衍生而来，解决了npm/yarn内部潜在的bug，极大的优化了性能，扩展了使用场景。被誉为“最先进的包管理工具”
pnpm安装指令
npm i -g pnpm
1.1.2搭建脚手架
pnpm create vite
进入到项目根目录pnpm i安装全部依赖.
2.2项目配置
一、配置eslint
eslint中文官网:eslint.nodejs.cn/
ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具
vite@4.4.5自带.eslintrc.cjs (以下是默认内容, 之后要被全部替换)
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 },
],
},
}
1.1 react 环境代码校验插件说明(目前共10个)
###### 让所有与prettier规则存在冲突的Eslint rules失效，并使用prettier进行代码检查
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-node": "^11.1.0",
###### 运行更漂亮的Eslint，使prettier规则优先级更高，Eslint优先级低
"eslint-plugin-prettier": "^4.2.1",
###### 该解析器允许使用Eslint校验所有babel code
"@babel/eslint-parser": "^7.19.1",
###############################################
"@typescript-eslint/eslint-plugin": "^6.1.0", //typescript对应的eslint 规则插件
"@typescript-eslint/parser": "^6.1.0",
"eslint": "^8.45.0",
"eslint-plugin-react": "^7.33.0",
"prettier": "^3.0.0"
安装指令( 先装7个,再装3个 )
pnpm install -D eslint eslint-plugin-import eslint-plugin-react eslint-plugin-node @babel/eslint-parser @typescript-eslint/eslint-plugin @typescript-eslint/parser
1.2修改.eslintrc.cjs配置文件(全选覆盖)
module.exports = {
// 运行环境
env: {
browser: true,
es2021: true,
node: true,
jest: true,
},
/* 指定如何解析语法 */
/** 优先级低于 parse 的语法解析配置 */
parserOptions: {
parser: '@typescript-eslint/parser', // 指定解析器
ecmaVersion: 'latest', // 允许解析那个版本的特性
sourceType: 'module', // 允许使用 import
jsxPragma: 'React',
ecmaFeatures: {
jsx: true, // 允许对JSX进行解析
},
},
/* 继承已有的规则 */
extends: [
'eslint:recommended', // vite自带
'plugin:@typescript-eslint/recommended', // vite自带 @typescript-eslint/eslint-plugin的推荐规则
'plugin:react-hooks/recommended', // vite自带
'plugin:import/typescript', // eslint-plugin-import 抛出导入等支持的规则
'plugin:prettier/recommended', // eslint-plugin-prettier 的推荐规则
],
// https://stackoverflow.com/questions/64126764/how-do-i-fix-typescript-compiler-errors-on-css-files
ignorePatterns: ["**/*.css", "**/*.scss"],
parser: '@typescript-eslint/parser', // 指定解析器
plugins: ['react-refresh', '@typescript-eslint', 'react', 'prettier'],
/*
* "off" 或 0 - 关闭规则
* "warn" 或 1 - 打开规则作为警告（不影响退出代码）
* "error" 或 2 - 打开规则作为错误（退出代码将为 1）
*/
rules: {
// react
'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
'react/no-children-prop': 'off',
// eslint（https://eslint.bootcss.com/docs/rules/）
'no-var': 'error', // 要求使用 let 或 const 而不是 var
'no-multiple-empty-lines': ['warn', { max: 1 }], // 不允许多个空行
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-unexpected-multiline': 'error', // 禁止空余的多行
'no-useless-escape': 'off', // 禁止不必要的转义字符
// typeScript (https://typescript-eslint.io/rules)
'@typescript-eslint/no-unused-vars': 'off', // 禁止定义未使用的变量
'@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用 @ts-ignore
'@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript 模块和命名空间。
'@typescript-eslint/semi': 'off',
},
}
1.3创建.eslintignore忽略文件
build
dist
node_modules
1.4配置脚本
package.json新增两个运行脚本
"scripts": {
...
"fix": "eslint src --fix",
},
通过pnpm run lint去检测语法，如果出现不规范格式,通过pnpm run fix 修改
二、配置prettier
有了eslint，为什么还要有prettier？eslint针对的是javascript，他是一个检测工具，包含js语法以及少部分格式问题，在eslint看来，语法对了就能保证代码正常运行，格式问题属于其次；
而prettier属于格式化工具，它看不惯格式不统一，所以它就把eslint没干好的事接着干，另外，prettier支持
包含js在内的多种语言。
总结起来，eslint和prettier这俩兄弟一个保证js代码质量，一个保证代码美观。
2.1安装依赖包
先装7个,再装3个
pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier
2.2创建.prettierrc.cjs, 添加规则
// https://prettier.io/docs/en/options.html
module.exports = {
printWidth: 100, //单行长度
tabWidth: 2, //缩进长度
useTabs: false, //使用空格代替tab缩进
semi: false, //句末分号
singleQuote: true, //js中使用单引号
jsxSingleQuote: false, // jsx中使用双引号
quoteProps: 'as-needed', //仅在必需时为对象的key添加引号
trailingComma: 'all', //多行时尽可能打印尾随逗号
bracketSpacing: true, //在对象前后添加空格-eg: { foo: bar }
bracketSameLine: false, //多属性html标签的‘>’折行放置
arrowParens: 'always', //单参数箭头函数参数周围使用圆括号-eg: (x) => x
requirePragma: false, //无需顶部注释即可格式化
insertPragma: false, //在已被preitter格式化的文件顶部加上标注
proseWrap: 'preserve', //什么都不做，让散文保持原样
htmlWhitespaceSensitivity: 'ignore', //对HTML全局空白不敏感
vueIndentScriptAndStyle: true, //不对vue中的script及style标签缩进
endOfLine: 'lf', //结束行形式
embeddedLanguageFormatting: 'auto', //对引用代码进行格式化
singleAttributePerLine: false, //在 HTML、Vue 和 JSX 中强制每行使用单一属性
}
2.3创建.prettierignore忽略文件
/.git
/.vscode
/build
/dist/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*
2.4配置脚本
"scripts": {
...
"format": "prettier --write \"./**/*.{tsx,ts,jsx,js,json,html,md}\"",
}
代码格式化 pnpm run format
三、配置stylelint
stylelint为css的lint工具。可格式化css代码，检查css语法错误与不合理的写法，指定css书写顺序等。
我们的项目样式处理使用 xxx.module.css，安装以下依赖：
将所有css文件修改为 xxx.module.css
将所有css引入修改为
import styles from './xxx.module.css'
npm init stylelint
3.1 .stylelintrc.cjs配置文件
将生成的 .stylelintrc.json 修改为 .stylelintrc.cjs
// @see https://stylelint.bootcss.com/
module.exports = {
"extends": [
'stylelint-config-standard', // 配置stylelint拓展插件
'stylelint-config-css-modules', // 接受 xxx.module.css
'stylelint-config-recess-order', // 配置stylelint css属性书写顺序插件
'stylelint-config-prettier', // 配置stylelint和prettier兼容
],
/**
* null => 关闭该规则
* always => 必须
*/
"rules": {
"font-family-no-missing-generic-family-keyword": null,
"font-family-name-quotes": null,
"selector-class-pattern": null,
"alpha-value-notation": null,
"function-url-quotes": null,
"color-function-notation": null,
}
}
3.2安装依赖
pnpm i stylelint-config-css-modules stylelint-config-recess-order stylelint-config-prettier typescript-plugin-css-modules -D
3.3创建.stylelintignore忽略文件
/node_modules/*
/dist/*
/html/*
/public/*
3.4运行脚本
"scripts": {
...
"fix:style": "npx stylelint \"**/*.css\" --fix",
},
3.5配置typescript
在tsconfig.json的compilerOptions中添加插件配置项
{
"compilerOptions": {
...
"plugins": [{ "name": "typescript-plugin-css-modules" }]
},
...
}
3.6 vscode(可选)
如果使用 vscode 编辑器, 可以在根项目下创建.vscode/settings.json
{
"typescript.tsdk":"node_modules/typescript/lib",
"typescript.enablePromptUseWorkspaceTsdk": true
}
这样输入styles.的时候就会有提示代码
四、配置husky
在上面我们已经集成好了我们代码校验工具，但是需要每次手动的去执行命令才会格式化我们的代码。如果有人没有格式化就提交了远程仓库中，那这个规范就没什么用。所以我们需要强制让开发人员按照代码规范来提交。
要做到这件事情，就需要利用husky在代码提交之前触发git hook(git在客户端的钩子)，然后执行 pnpm run format来自动的格式化我们的代码。
安装 husky
pnpm install -D husky
执行
npx husky-init
会在根目录下生成个一个.husky目录，在这个目录下面会有一个pre-commit文件，这个文件里面的命令在我们执行commit的时候就会执行
尝试在.husky/pre-commit文件添加如下命令：
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm fix
pnpm format
git add .
.husky/pre-commit文件在之后配置 lint-staged 时还要再次被修改! 在这里写是为了理解文件可以写一些什么代码, 方便理解.
当我们对代码进行commit操作的时候，就会执行命令，对代码进行格式化，然后再提交。
五、配置cz-customizable
pnpm i -D cz-customizable
根目录创建.cz-config.js
module.exports = {
types: [
{
value: '✨ feat',
name: '✨ feat: 新功能',
},
{
value: '🐛 fix',
name: '🐛 fix: 修复bug',
},
{
value: '🚀 chore',
name: '🚀 chore: 构建/工程依赖/工具',
},
{
value: '💄 style',
name: '💄 style: 代码的样式美化',
},
{
value: '♻️ refactor',
name: '♻️ refactor: 重构',
},
{
value: '⚡️ perf',
name: '⚡️ perf: 性能优化',
},
{
value: '✅ test',
name: '✅ test: 测试',
},
{
value: '🎉 init',
name: '🎉 init: 初始化',
},
{
value: '📝 docs',
name: '📝 docs: 文档变更',
},
{
value: '⏪️ revert',
name: '⏪️ revert: 回退',
},
{
value: '🔧 config',
name: '🔧 config: 修改配置',
},
{
value: '📦️ build',
name: '📦️ build: 打包',
},
{
value: '👷 ci',
name: '👷 ci: CI related changes',
},
],
messages: {
type: '请选择提交类型(必填)',
customScope: '请输入文件修改范围(可选)',
subject: '请简要描述提交(必填)',
body: '请输入详细描述(可选)',
breaking: '列出任何BREAKING CHANGES(可选)',
footer: '请输入要关闭的issue(可选)',
confirmCommit: '确定提交此说明吗？',
},
allowCustomScopes: true,
allowBreakingChanges: [':sparkles: feat', ':bug: fix'],
subjectLimit: 72,
}
配置脚本
"type": "commonjs",
"scripts": {
...
"prepare": "husky install",
"commit": "cz-customizable"
},
以后使用 pnpm commit 代替 git commit -m
但这样做还是会有人使用 git commit，所以要配置 commitlint
六、配置commitlint
git log 日志规范
6.1安装规范包
pnpm add @commitlint/cli commitlint-config-cz commitlint-config-git-commit-emoji -D
6.2创建commitlint.config.cjs(注意是cjs)，然后添加下面的代码：
module.exports = {
extends: ['git-commit-emoji', 'cz']
}
6.3在 package.json中配置scripts命令
# 在scrips中添加下面的代码
"scripts": {
...
"commitlint": "commitlint --config commitlint.config.cjs -e -V"
},
6.4配置husky
npx husky add .husky/commit-msg
在生成的commit-msg文件中添加下面的命令
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm run commitlint
这样git commit -m就提交不了了，必须用pnpm commit提交！
七、配置 lint-staged
pnpm i lint-staged -D
package.json文件
"scripts": {
...
"lint-staged": "lint-staged"
},
"lint-staged": {
"./src/*.{html,tsx,ts,jsx,js,json,vue}": [
"eslint src --fix",
"prettier --write"
],
"./src/*.css": [
"npx stylelint \"**/*.css\" --fix"
]
},
.husky\pre-commit 文件内容如下:
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm run lint-staged
lint-staged 的作用是只校验 git add 中的文件
没有被 git add 的文件不校验
八、强制使用pnpm包管理器工具
团队开发项目的时候，需要统一包管理器工具,因为不同包管理器工具下载同一个依赖,可能版本不一样,
导致项目出现bug问题,因此包管理器工具需要统一管理！！！
在根目录创建 scripts/preinstall.js文件，添加下面的内容
if (!/pnpm/.test(process.env.npm_execpath || '')) {
console.warn(
`\u001b[33mThis repository must using pnpm as the package manager ` +
` for scripts to work properly.\u001b[39m\n`,
)
process.exit(1)
}
package.json配置命令
"scripts": {
...
"preinstall": "node ./scripts/preinstall.js"
},
当我们使用npm或者yarn来安装包的时候，就会报错了。原理就是在install的时候会触发preinstall（npm提供的生命周期钩子）这个文件里面的代码。
九、配置 vite.config.ts
pnpm i vite-plugin-stylelint -D
打开 vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import path from 'path'
import stylelint from 'vite-plugin-stylelint';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react(), stylelint({ fix: true })],
resolve: {
alias: {
'@': path.resolve('./src')
}
}
})
十、配置 tsconfig.json
打开 tsconfig.json
{
"compilerOptions": {
...
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
...
}
pnpm i @types/node -D
vscode中执行Ctrl+Shift+P输入reload window重启vscode
如果不配置此项, 会发现vscode引入文件中有波浪线警告
十一、代码上传前用 jest 测试
todo...
二、项目最终配置
package.json
{
"name": "frontend-project-engineering",
"private": true,
"version": "0.0.0",
"type": "commonjs",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview",
"fix": "eslint src --fix",
"format": "prettier --write \"./**/*.{tsx,ts,jsx,js,json,html,md,vue}\"",
"fix:style": "npx stylelint \"**/*.css\" --fix",
"prepare": "husky install",
"commit": "cz-customizable",
"commitlint": "commitlint --config commitlint.config.cjs -e -V",
"lint-staged": "lint-staged",
"preinstall": "node ./scripts/preinstall.js"
},
"lint-staged": {
"./src/*.{html,tsx,ts,jsx,js,json,vue}": [
"eslint src --fix",
"prettier --write"
],
"./src/*.css": [
"npx stylelint \"**/*.css\" --fix"
]
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@babel/eslint-parser": "^7.22.15",
"@commitlint/cli": "^17.7.1",
"@types/node": "^20.6.2",
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@typescript-eslint/eslint-plugin": "^6.7.0",
"@typescript-eslint/parser": "^6.7.0",
"@vitejs/plugin-react-swc": "^3.3.2",
"commitlint-config-cz": "^0.13.3",
"commitlint-config-git-commit-emoji": "^1.0.0",
"cz-customizable": "^7.0.0",
"eslint": "^8.49.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-import": "^2.28.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^5.0.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"husky": "^8.0.0",
"lint-staged": "^14.0.1",
"prettier": "^3.0.3",
"stylelint": "^15.10.3",
"stylelint-config-css-modules": "^4.3.0",
"stylelint-config-prettier": "^9.0.5",
"stylelint-config-recess-order": "^4.3.0",
"stylelint-config-standard": "^34.0.0",
"typescript": "^5.0.2",
"typescript-plugin-css-modules": "^5.0.1",
"vite": "^4.4.5",
"vite-plugin-stylelint": "^5.1.1"
}
}
tsconfig.json
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
/* My Custom */
"plugins": [{ "name": "typescript-plugin-css-modules" }],
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
三、react组件通信方式
组件通信方式很重要,不管是项目还是面试都是经常用到的知识点。
- props: 可以实现父子组件、子父组件、甚至兄弟组件通信(状态提升)
- context: 可以实现任意组件通信
- 集中式状态管理等: Redux、Mobox、Zustand、Resso 等...
- 消息订阅-发布: pubsub 等...
转载自:https://juejin.cn/post/7278660152747966504