前端基建之（二）项目约定
1. 技术约定
- React（v18）
- React-Router V6
- React-Redux
- Typescript
2. 命名
- 变量禁止拼音
- 文件夹用驼峰命名
参考的规范链接
3. 文件目录约定
- @api
- @assets
- @pages
- @modules
- @components
- @constant
- @hooks
- @utils
- @router
- @store
- @type
- @style
4. 通用工具封装
- axios
- utils
- hooks
5. Typescript 类型加强
6. css
- ant-desgin4.x
less
7. 静态资源
8. 注释
- 注释
- README
9. 加密规范
10. 打包工具
- webpack
- vite
11. 创建自定义 CRA Template 模板
11.1 新建项目
准备发布的名字就叫 cra-template-water
npx create-react-app cra-template-water --template typescript
11.2 构建自己的项目模板
参考资料
按照自定义需求设定项目
根目录创建
template目录
mkdir template
- 将根目录
.gitignore复制到template目录，template目录下的gitignore文件不能以.开头
cp .gitignore template/gitignore
- 在根目录创建
template.json，放入依赖包和scripts
{
"package": {
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.11",
"@types/react": "^18.0.26",
"@types/react-dom": "^18.0.10",
"antd": "^5.1.2",
"axios": "^1.2.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.0.5",
"react-router-dom": "^6.6.1",
"react-scripts": "5.0.1",
"typescript": "^4.9.4",
"web-vitals": "^2.1.4"
},
"devDependencies": {
"@commitlint/cli": "^17.4.0",
"@commitlint/config-conventional": "^17.4.0",
"@craco/craco": "^7.0.0",
"eslint": "^8.31.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-prettier": "^8.6.0",
"eslint-import-resolver-typescript": "^3.5.2",
"eslint-plugin-prettier": "^4.2.1",
"husky": "^8.0.3",
"prettier": "^2.8.2"
},
"scripts": {
"prepare": "husky install",
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "craco eject",
"lint": "eslint src --ext .ts,.jsx,.tsx --fix --quiet",
"prettier": "prettier --write **/*.{js,jsx,ts,tsx,json}"
}
}
}
将项目涉及到的文件全部拷贝到
template目录下解决在
tsconfig.json配置path别名后，cra重新启动会覆盖tsconfig.json中的某些配置项的问题
问题参考
新建 tsconfig-path.json
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"@api/*": ["api/*"],
"@assets/*": ["assets/*"],
"@components/*": ["components/*"],
"@hooks/*": ["hooks/*"],
"@pages/*": ["pages/*"],
"@router/*": ["router/*"],
"@store/*": ["store/*"],
"@style/*": ["style/*"],
"@utils/*": ["utils/*"]
}
}
}
在 tsconfig.json 中扩展
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"],
"extends": "./tsconfig-path.json"
}
11.3 通过 NPM 发布
- 登录 npm
npm login
- 如果想要类似
@babel/parser的效果可以设定组织范围
npm init --scope=@carbonhydrogen2oxygen
- 发布
npm publish --access public
- 测试
npx create-react-app demo-admin --template @carbonhydrogen2oxygen/cra-template-water