React内逐行解释这个 package.json 文件,最近搞了个工厂AI生产平台,顺便来学习一下
typescript
{
"name": "dkjj-msc-product", // 项目名称:dkjj-msc-product
"version": "1.0.24", // 项目版本号:1.0.24
"private": true, // 标记为私有包,不会发布到npm
"author": "随风一样自由", // 作者:随风一样自由
"scripts": { // 脚本命令配置
"build:zd-jj3-dev": "cross-env APP_ENV=dev max build", // 开发环境构建命令
"build:zd-jj3-prod": "cross-env APP_ENV=prod max build", // 生产环境构建命令
"build:zd-jj3-fat": "cross-env APP_ENV=test max build", // 测试环境构建命令
"dev": "npm run dev:dev", // 开发命令别名,指向dev:dev
"dev:dev": "cross-env APP_ENV=dev max dev", // 开发环境启动命令
"dev:prod": "cross-env APP_ENV=prod max dev", // 生产环境启动命令
"dev:test": "cross-env APP_ENV=test max dev", // 测试环境启动命令
"dev:local": "cross-env APP_ENV=dev LOCAL_ENV=development max dev", // 本地开发环境启动
"dev:test_local": "cross-env APP_ENV=test LOCAL_ENV=development TEST_LOCAL_ENV=dev max dev", // 本地测试环境启动
"format": "prettier --write \"src/**/*.{js,jsx,tsx,ts,css,less,html,md,json}\"", // 代码格式化命令
"postinstall": "max setup", // 安装依赖后执行的命令
"setup": "max setup", // 项目初始化命令
"lint": "eslint . --ext .js,.ts,.jsx,.tsx", // 代码检查命令
"lint:fix": "eslint . --ext .js,.ts,.jsx,.tsx --fix", // 代码检查并自动修复
"lint:style": "stylelint \"src/**/*.{htm,html,css,less}\"", // 样式代码检查
"lint:style:fix": "stylelint \"src/**/*.{htm,html,css,less}\" --fix", // 样式代码检查并修复
"stylelint-check": "stylelint-config-prettier-check", // 检查stylelint和prettier配置是否冲突
"prepare": "husky install", // 安装husky git钩子
"start": "npm run dev" // 启动命令别名
},
"dependencies": { // 生产环境依赖
"@ant-design/icons": "^5.3.7", // Ant Design图标库
"@dnd-kit/core": "^6.1.0", // 拖拽功能核心库
"@dnd-kit/modifiers": "^7.0.0", // 拖拽修饰符
"@dnd-kit/sortable": "^8.0.0", // 拖拽排序功能
"@dnd-kit/utilities": "^3.2.2", // 拖拽工具函数
"@humi-ui/table": "file:src/packages/@humi-ui/table", // 自定义表格组件
"@humi/print-design": "file:src/packages/@humi/print-design", // 自定义打印设计组件
"@umijs/max": "4.0.13", // UmiJS框架
"ahooks": "^3.7.8", // React Hooks工具库
"antd": "^5.5.0", // Ant Design UI组件库
"axios": "^0.27.2", // HTTP请求库
"click-to-react-component": "1.1.0", // 点击跳转React组件工具
"dayjs": "^1.11.11", // 日期处理库
"echarts": "5.4.1", // 图表库
"js-cookie": "^3.0.1", // Cookie操作库
"lodash": "^4.17.21", // JavaScript工具库
"moment": "^2.30.1", // 日期处理库
"prop-types": "^15.8.1", // React属性类型检查
"react-activation": "^0.13.4", // React状态保持
"react-dnd": "^16.0.1", // React拖拽库
"react-dnd-html5-backend": "^16.0.1", // React DND的HTML5后端
"react-resizable": "^3.0.5", // React可调整大小组件
"react-sortable-hoc": "^2.0.0" // React排序高阶组件
},
"devDependencies": { // 开发环境依赖
"@commitlint/cli": "^17.1.1", // Git提交信息检查工具
"@commitlint/config-conventional": "^17.1.0", // 常规提交信息配置
"@types/react": "^18.0.0", // React类型定义
"@types/react-dom": "^18.0.0", // React DOM类型定义
"@typescript-eslint/eslint-plugin": "^5.35.1", // TypeScript ESLint插件
"cross-env": "^7.0.3", // 跨平台环境变量设置
"eslint": "^8.22.0", // JavaScript代码检查工具
"eslint-config-prettier": "^8.5.0", // ESLint与Prettier集成配置
"eslint-plugin-prettier": "^4.2.1", // ESLint的Prettier插件
"husky": "^8.0.1", // Git钩子工具
"mddir": "^1.1.1", // 目录结构生成工具
"postcss": "^8.4.16", // CSS转换工具
"postcss-html": "^1.5.0", // PostCSS HTML解析器
"postcss-less": "^6.0.0", // PostCSS Less解析器
"prettier": "^2.7.1", // 代码格式化工具
"prettier-plugin-organize-imports": "^2", // Prettier导入排序插件
"prettier-plugin-packagejson": "^2", // Prettier的package.json格式化插件
"stylelint": "^14.11.0", // CSS代码检查工具
"stylelint-config-prettier": "^9.0.3", // Stylelint与Prettier集成配置
"stylelint-config-recommended-less": "^1.0.4", // Less推荐配置
"stylelint-config-standard": "^28.0.0", // 标准Stylelint配置
"stylelint-order": "^5.0.0", // CSS属性排序插件
"typescript": "^4.1.2" // TypeScript编译器
}
}
这是一个完整的前端项目配置文件,包含了:
- 项目基本信息
- 多环境构建和开发命令
- 完整的代码质量工具链
- 丰富的功能依赖包
- 规范的开发环境配置
特别值得注意的是:
- 使用了UmiJS框架作为基础架构
- 包含完整的拖拽功能支持
- 有自定义的UI组件库
- 代码质量管控严格,包含完整的lint和格式化工具
- 支持多环境部署和开发