npm-package文件配置及说明
以下集成内容仅对项目基本信息及npm脚本命令作用做以下解释,如需进行代码对照,可参考目录下 react19_ts 项目内实际代码,文档与代码会在git上持续补充
git仓库地址:https://gitee.com/xiaoli-account/react19_ts依赖包作用主要用来管理当前项目的基本信息及项目启动命令与依赖包版本
# 基本信息
package.json│├─ name // 项目或包名,唯一且小写,可含 - 或 _│├─ private// 是否私有,布尔值,true 可防止 npm publish│├─ version // 版本号,遵循 SemVer:MAJOR.MINOR.PATCH│├─ type// 模块类型│ ├─ "commonjs"// 使用 require/module.exports│ └─ "module"// 使用 import/export│├─ engines // 运行环境要求│ ├─ node // Node.js 版本,例如 ">=18.0.0"│ └─ npm // npm 版本,例如 ">=9.0.0"│└─ browserslist // 前端浏览器兼容配置 ├─ ">0.2%"// 覆盖市场占有率大于 0.2% 的浏览器 ├─ "not dead"// 排除不再更新的浏览器 └─ "not op_mini all"// 排除 Opera Mini
1、name
> 项目或包的名称。必须全部小写
> 可以使用字母、数字、短横线 - 和下划线 _。
> 不允许使用空格。
> 如果发布到 npm,名字必须唯一。
2、private
> 标记项目是否私有
> 私有项目建议设置 true,防止误用 npm publish 发布到公共 npm。
> 当设置为 true 时,npm 会阻止发布。
3、version
> 项目版本号,每次项目的版本更新,都应该更新当前版本号
> 版本号风格建议,0.1.2格式
> 分别代表
> 0:大版本(如:项目重构或其他大面积更改)
> 1:重大模块变更(如:新增系统管理模块)
> 2:小版本更新(如:修改bug或优化交互逻辑)
4、type
> 指定项目模块类型(CommonJS 或 ESM)
> "commonjs" → 使用 require / module.exports
> "module" → 使用 import / export
5、engines
> 指定项目支持的 Node.js 或 npm 版本
6、browserslist
> 指定项目需要兼容的浏览器环境
# 脚本命令
- 1、dev命令 **npm run dev**
> 用来通过vite启动项目
- 2、build命令 **npm run dev**
> 使用vite与ts类型检查对项目执行打包
3、build:skip-ts命令 **npm run build:skip-ts**
> 跳过ts类型检查,直接执行vite打包,等同于非严格模式打包,会忽略一些类型错误进行打包
4、lint命令 **npm run lint**
> 通过eslint进行项目的代码检查,提升代码可读性
5、preview命令 **npm run preview**
> 通过vite的预览模式,在本地模拟线上开发模式的运行环境
6、format命令 **npm run format**
> 通过prettier插件,对项目全部未进行prettier格式化的文件进行,代码格式化风格统一
7、koa **npm run koa**
> 通过node环境,调用自定义js脚本,一键运行koa后台服务与react前端
8、dev:koa **npm run dev:koa**
> 用来辅助自定义js脚本,调用vite启动命令,设定环境标识mock
9、mock **npm run mock**
> 通过node环境,调用自定义js脚本,一键运行mockjs服务与react前端
10、dev:mock **npm run dev:mock**
> 用来辅助自定义js脚本,调用vite启动命令,设定环境标识mock
# 项目依赖包配置文件代码备份
{"name": "react19_ts","private": true,"version": "0.0.1","type": "module","engines": {"node": ">=18.0.0","npm": ">=9.0.0" },"browserslist": ["Chrome >= 90","Edge >= 90","Firefox >= 88","Safari >= 14","iOS >= 14","Android >= 8","not IE 11","not dead" ],"scripts": {"dev": "vite","build": "tsc -b && vite build","build:skip-ts": "vite build","lint": "eslint .","preview": "vite preview","format": "prettier --write .","koa": "node koa.startup.script.js","dev:koa": "vite --mode mock","mock": "node mock.startup.script.js","dev:mock": "vite --mode mock" },"dependencies": {"@ant-design/colors": "^8.0.1","@ant-design/icons": "^6.1.0","@logicflow/core": "^2.1.7","@logicflow/extension": "^2.1.9","@tailwindcss/typography": "^0.5.19","animate.css": "^4.1.1","antd": "^6.1.4","autoprefixer": "^10.4.23","axios": "^1.13.2","crypto-js": "^4.2.0","echarts": "^6.0.0","gm-crypt": "^0.0.2","i18next": "^25.7.4","i18next-browser-languagedetector": "^8.2.0","i18next-http-backend": "^3.0.2","js-cookie": "^3.0.5","localforage": "^1.10.0","lodash-es": "^4.17.22","nprogress": "^0.2.0","postcss": "^8.5.6","qs": "^6.15.0","react": "^19.2.0","react-dom": "^19.2.0","react-i18next": "^16.5.1","react-markdown": "^10.1.0","react-router-dom": "^7.12.0","remark-gfm": "^4.0.1","sass": "^1.97.2","tailwindcss": "^4.1.18","uuid": "^13.0.0","zustand": "^5.0.9" },"devDependencies": {"@eslint/js": "^9.39.1","@tailwindcss/postcss": "^4.1.18","@tailwindcss/vite": "^4.1.18","@types/crypto-js": "^4.2.2","@types/js-cookie": "^3.0.6","@types/lodash-es": "^4.17.12","@types/node": "^24.10.1","@types/nprogress": "^0.2.3","@types/qs": "^6.15.0","@types/react": "^19.2.5","@types/react-dom": "^19.2.3","@vitejs/plugin-react": "^5.1.1","eslint": "^9.39.1","eslint-plugin-react-hooks": "^7.0.1","eslint-plugin-react-refresh": "^0.4.24","globals": "^16.5.0","prettier": "^3.8.1","typescript": "~5.9.3","typescript-eslint": "^8.46.4","vite": "^7.2.4","vite-plugin-obfuscator": "^1.0.5" }}