前端package.json文件详解
简介
package.json 文件是 Node.js 项目的配置文件，用于描述项目的元数据和依赖关系。它是一个 JSON 格式的文件，位于项目根目录下。在这个文件中，你可以定义项目的名称、版本号、作者、许可证等项目信息，并且可以列出项目所需的依赖包和脚本。
在创建新的 Node.js 项目时，通常会通过运行 npm init 命令来生成 package.json 文件。你可以手动编辑该文件，或者使用 npm install 命令来安装新的依赖包，package.json 文件会自动更新。
示例及说明
示例
代码语言：javascript代码运行次数：0运行复制{
"name": "saas-manager",
"version": "1.22.18",
"private": true,
"scripts": {
"analyze": "cross-env ANALYZE=1 yarn build",
"start": "cross-env APP_NODE_ENV=test umi dev",
"start:production": "cross-env APP_NODE_ENV=production umi dev",
"dev": "yarn cross-env APP_NODE_ENV=production yarn umi dev",
"dev:production": "yarn cross-env APP_NODE_ENV=production yarn umi dev",
"dev:devprod": "yarn cross-env APP_NODE_ENV=devprod yarn umi dev",
"test": "umi-test",
"test:coverage": "umi-test --coverage",
"lint:es": "eslint --ext .js src mock tests",
"lint:ts": "eslint --fix \"src/**/*.ts\" \"src/**/*.tsx\"",
"lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ",
"deploy": "yarn cross-env APP_NODE_ENV=production NODE_OPTIONS=--max_old_space_size=4096 node deploy",
"deploy:test": "yarn cross-env APP_NODE_ENV=test node deploy",
"deploy:development": "yarn cross-env APP_NODE_ENV=development NODE_OPTIONS=--max_old_space_size=4096 node deploy",
"deploy:preProduction": "cross-env APP_NODE_ENV=preProduction node deploy",
"build": "cross-env APP_NODE_ENV=production yarn umi build",
"build:test": "cross-env APP_NODE_ENV=test yarn umi build",
"build:development": "cross-env APP_NODE_ENV=development yarn umi build",
"build:preProduction": "cross-env APP_NODE_ENV=preProduction yarn umi umi build",
"prepare": "husky install",
"addEDK": "git remote add -f edk .git; git subtree add -P src/edk edk master --squash",
"pullEDK": "git subtree pull -P src/edk edk master --squash",
"pushEDK": "git subtree push -P src/edk edk master"
},
"dependencies": {
"@amap/amap-jsapi-loader": "^1.0.1",
"@ant-design/charts": "^1.3.6",
"@ant-design/colors": "^6.0.0",
"@ant-design/icons": "^4.6.3",
"@better-scroll/core": "^2.4.2",
"@better-scroll/mouse-wheel": "^2.4.2",
"@better-scroll/observe-dom": "^2.4.2",
"@better-scroll/scroll-bar": "^2.4.2",
"@formily/antd": "^1.3.17",
"@formily/antd-components": "^1.3.17",
"@formily/react": "^1.3.13",
"@formily/react-schema-renderer": "^1.3.17",
"@spark-build/web-utils": "^0.0.7",
"@umijs/plugin-esbuild": "^1.4.1",
"ahooks": "^2.10.9",
"antd": "^4.24.5",
"antd-img-crop": "^4.2.0",
"axios": "^0.21.1",
"bignumber.js": "^9.0.1",
"braft-editor": "^2.3.9",
"classnames": "^2.3.1",
"dayjs": "^1.10.6",
"dva-model-extend": "^0.1.2",
"eslint-plugin-prettier": "^3.4.1",
"file-saver": "^2.0.5",
"immutability-helper": "^3.1.1",
"lodash": "^4.17.21",
"nanoid": "^3.1.25",
"qiniu-js": "^3.3.3",
"qrcode.react": "^1.0.1",
"qs": "^6.10.1",
"react": "^17.0.2",
"react-activation": "^0.12.2",
"react-color": "^2.19.3",
"react-dnd": "^14.0.3",
"react-dnd-html5-backend": "^14.0.1",
"react-dom": "^17.0.2",
"react-image-gallery": "^1.2.7",
"react-query": "^3.34.16",
"react-virtualized": "^9.22.3",
"react-virtualized-auto-sizer": "^1.0.6",
"react-window": "^1.8.6",
"reselect": "^4.0.0",
"styled-components": "^5.3.5",
"umi": "^3.5.25",
"umi-plugin-keep-alive": "^0.0.1-beta.35",
"umi-request": "^1.3.9",
"unstated-next": "^1.1.0",
"use-immer": "^0.6.0"
},
"devDependencies": {
"@types/classnames": "^2.3.1",
"@types/file-saver": "^2.0.3",
"@types/jest": "^27.0.1",
"@types/lodash": "^4.14.172",
"@types/qrcode.react": "^1.0.2",
"@types/qs": "^6.9.7",
"@types/react": "^17.0.47",
"@types/react-color": "^3.0.5",
"@types/react-dom": "^17.0.17",
"@types/react-image-gallery": "^1.0.4",
"@types/react-test-renderer": "^17.0.1",
"@types/react-window": "^1.8.5",
"@umijs/fabric": "^2.10.2",
"@umijs/preset-react": "^2.1.3",
"antd-dayjs-webpack-plugin": "^1.0.6",
"babel-plugin-lodash": "^3.3.4",
"cross-env": "^7.0.3",
"husky": "^7.0.2",
"lint-staged": "^11.1.2",
"lodash-webpack-plugin": "^0.11.6",
"mime": "^2.5.2",
"qiniu": "^7.4.0",
"react-test-renderer": "^17.0.2",
"request": "^2.88.2",
"typescript": "^4.3.5"
},
"lint-staged": {
"**/*.less": "stylelint --syntax less --fix",
"*.{js,jsx,less,md,json}": [
"prettier --write"
],
"*.{js,jsx}": [
"eslint --fix"
],
"*.ts?(x)": [
"prettier --parser=typescript --write",
"eslint --fix"
]
}
}说明
package.json 文件的主要作用有以下几点：
- 元数据描述：
package.json文件中的name、version、description、author等字段用于描述项目的基本信息，这些信息对于项目的发布和共享非常重要。 - 脚本定义：
你可以使用
scripts字段定义一些命令，以方便项目的构建、测试、运行等操作。这些脚本可以通过npm run命令来执行。 这是一个项目的 `package.json` 文件中的 `"scripts"` 字段的示例。该字段定义了一系列可执行的脚本命令，可以通过在命令行中运行 `npm run <script-name>` 来执行这些命令。下面是每个脚本命令的功能： - `"analyze"`：使用 `cross-env` 设置环境变量 `ANALYZE=1`，然后运行 `yarn build` 命令。 - `"start"`：使用 `cross-env` 设置环境变量 `APP_NODE_ENV=test`，然后运行 `umi dev` 命令。 - `"start:production"`：使用 `cross-env` 设置环境变量 `APP_NODE_ENV=production`，然后运行 `umi dev` 命令。 - `"dev"`：使用 `yarn cross-env APP_NODE_ENV=production`，然后运行 `yarn umi dev` 命令。 - `"dev:production"`：使用 `yarn cross-env APP_NODE_ENV=production`，然后运行 `yarn umi dev` 命令。 - `"dev:devprod"`：使用 `yarn cross-env APP_NODE_ENV=devprod`，然后运行 `yarn umi dev` 命令。 - `"test"`：运行 `umi-test` 命令。 - `"test:coverage"`：运行 `umi-test` 命令，并生成测试覆盖报告。 - `"lint:es"`：使用 `eslint` 检查 `.js` 文件的语法错误，并修复。 - `"lint:ts"`：使用 `eslint` 检查 `.ts` 和 `.tsx` 文件的语法错误，并修复。 - `"lint-staged:js"`：使用 `eslint` 检查 `.js`、`.jsx`、`.ts` 和 `.tsx` 文件的语法错误。 - `"deploy"`：使用 `cross-env` 设置环境变量 `APP_NODE_ENV=production`，并设置 `NODE_OPTIONS` 为 `--max_old_space_size=4096`，然后运行 `node deploy` 命令。 - `"deploy:test"`：使用 `cross-env` 设置环境变量 `APP_NODE_ENV=test`，然后运行 `node deploy` 命令。 - `"deploy:development"`：使用 `cross-env` 设置环境变量 `APP_NODE_ENV=development`，并设置 `NODE_OPTIONS` 为 `--max_old_space_size=4096`，然后运行 `node deploy` 命令。 - `"deploy:preProduction"`：使用 `cross-env` 设置环境变量 `APP_NODE_ENV=preProduction`，然后运行 `node deploy` 命令。 - `"build"`：使用 `cross-env` 设置环境变量 `APP_NODE_ENV=production`，然后运行 `yarn umi build` 命令。 - `"build:test"`：使用 `cross-env` 设置环境变量 `APP_NODE_ENV=test`，然后运行 `yarn umi build` 命令。 - `"build:development"`：使用 `cross-env` 设置环境变量 `APP_NODE_ENV=development`，然后运行 `yarn umi build` 命令。 - `"build:preProduction"`：使用 `cross-env` 设置环境变量 `APP_NODE_ENV=preProduction`，然后运行 `yarn umi build` 命令。 - `"prepare"`：安装 `husky`。 - `"addEDK"`：将 `edk` 作为一个子仓库添加到 `src/edk` 目录中。 - `"pullEDK"`：从 `edk` 子仓库中拉取最新的代码到 `src/edk` 目录中。 - `"pushEDK"`：将 `src/edk` 目录中的代码推送到 `edk` 子仓库中。 这些脚本命令可以根据项目的需求进行自定义，以提高开发效率。 - 依赖管理：
你可以在
package.json中列出项目所需的依赖包，包括项目运行时依赖 (dependencies) 和开发时依赖 (devDependencies)。这些依赖包的版本号可以被锁定，确保不同环境下的一致性。 运行时依赖 (dependencies) 根据提供的 `package.json` 文件中的 `dependencies` 字段，这是一个使用 npm 管理的前端项目的依赖列表。以下是一些重要的依赖： - `@amap/amap-jsapi-loader`: 高德地图 JavaScript API 加载器。 - `@ant-design/charts`: Ant Design 的图表组件库。 - `@ant-design/colors`: Ant Design 的颜色库。 - `@ant-design/icons`: Ant Design 的图标库。 - `@better-scroll/core`: BetterScroll 的核心库。 - `@better-scroll/mouse-wheel`: BetterScroll 的鼠标滚轮插件。 - `@better-scroll/observe-dom`: BetterScroll 的 DOM 观察插件。 - `@better-scroll/scroll-bar`: BetterScroll 的滚动条插件。 - `@formily/antd`: Formily 的 Ant Design 组件库。 - `@formily/antd-components`: Formily 的 Ant Design 组件扩展库。 - `@formily/react`: Formily 的 React 组件库。 - `@formily/react-schema-renderer`: Formily 的 React Schema 渲染器。 - `@spark-build/web-utils`: Spark Build 的 Web 工具库。 - `@umijs/plugin-esbuild`: Umi 的 esbuild 插件。 - `ahooks`: React Hooks 的一组实用工具库。 - `antd`: Ant Design 的 React UI 组件库。 - `antd-img-crop`: Ant Design 的图片裁剪组件。 - `axios`: 用于发起 HTTP 请求的 JavaScript 库。 - `bignumber.js`: 用于处理大数的 JavaScript 库。 - `braft-editor`: 一款基于 React 的富文本编辑器。 - `classnames`: 用于动态生成 CSS 类名的 JavaScript 工具。 - `dayjs`: 一款轻量级的日期处理库。 - `dva-model-extend`: 用于扩展 dva 模型的工具库。 - `eslint-plugin-prettier`: ESLint 和 Prettier 的集成插件。 - `file-saver`: 用于在浏览器中保存文件的 JavaScript 库。 - `immutability-helper`: 用于处理不可变数据的 JavaScript 库。 - `lodash`: 一款实用的 JavaScript 工具库。 - `nanoid`: 用于生成唯一 ID 的 JavaScript 库。 - `qiniu-js`: 七牛云 JavaScript SDK。 - `qrcode.react`: 用于生成二维码的 React 组件。 - `qs`: 用于序列化和解析 URL 查询字符串的 JavaScript 库。 - `react`: React 库。 - `react-activation`: 用于实现按需加载的 React 组件。 - `react-color`: 用于选择颜色的 React 组件。 - `react-dnd`: React 的拖放库。 - `react-dnd-html5-backend`: React 拖放库的 HTML5 后端。 - `react-dom`: React 的 DOM 渲染器。 - `react-image-gallery`: 用于展示图片幻灯片的 React 组件。 - `react-query`: 用于数据查询和缓存的 React 库。 - `react-virtualized`: 用于渲染大型列表和表格的 React 组件库。 - `react-virtualized-auto-sizer`: 用于自动调整 React Virtualized 组件尺寸的组件。 - `react-window`: 用于高效渲染大型列表和表格的 React 组件库。 - `reselect`: 用于创建可记忆的、可组合的选择器的库。 - `styled-components`: 用于创建样式化组件的库。 - `umi`: Umi.js 的核心库。 - `umi-plugin-keep-alive`: Umi.js 的保持活动插件。 - `umi-request`: Umi.js 的请求库。 - `unstated-next`: 状态管理库 Unstated 的 React Hooks 版本。 - `use-immer`: 用于管理不可变状态的 React Hooks。 这些依赖项用于构建前端项目并提供各种功能和工具，如 UI 组件、请求处理、数据管理、日期处理等。 开发时依赖 (devDependencies) 这是一个项目的devDependencies部分，它列出了项目所依赖的开发环境的库和工具。让我来详细解释一下每个依赖的作用和版本号： - "@types/classnames": "^2.3.1"：这个库提供了用于类型定义的classnames库。它允许您在React组件中动态添加和删除类名。 - "@types/file-saver": "^2.0.3"：这个库提供了用于类型定义的file-saver库。它允许您在浏览器中保存文件。 - "@types/jest": "^27.0.1"：这个库提供了用于类型定义的jest库。它是一个功能强大的JavaScript测试框架，用于编写和运行单元测试。 - "@types/lodash": "^4.14.172"：这个库提供了用于类型定义的lodash库。它是一个实用的JavaScript工具库，提供了许多常用的函数和方法。 - "@types/qrcode.react": "^1.0.2"：这个库提供了用于类型定义的qrcode.react库。它允许您在React应用程序中生成二维码。 - "@types/qs": "^6.9.7"：这个库提供了用于类型定义的qs库。它是一个用于解析和构建URL查询字符串的库。 - "@types/react": "^17.0.47"：这个库提供了用于类型定义的React库。它是一个用于构建用户界面的JavaScript库。 - "@types/react-color": "^3.0.5"：这个库提供了用于类型定义的react-color库。它是一个用于选择颜色的React组件库。 - "@types/react-dom": "^17.0.17"：这个库提供了用于类型定义的ReactDOM库。它是React的官方DOM操作库。 - "@types/react-image-gallery": "^1.0.4"：这个库提供了用于类型定义的react-image-gallery库。它是一个用于显示图片幻灯片的React组件库。 - "@types/react-test-renderer": "^17.0.1"：这个库提供了用于类型定义的react-test-renderer库。它是React的官方测试工具，用于创建和渲染React组件的快照。 - "@types/react-window": "^1.8.5"：这个库提供了用于类型定义的react-window库。它是一个用于渲染大型列表和表格的高性能React组件库。 - "@umijs/fabric": "^2.10.2"：这个库提供了umi框架所使用的一些通用工具和函数。 - "@umijs/preset-react": "^2.1.3"：这个库提供了umi框架在React项目中使用的一些预设配置。 - "antd-dayjs-webpack-plugin": "^1.0.6"：这个库是一个Webpack插件，用于优化antd库中的日期选择组件的依赖。 - "babel-plugin-lodash": "^3.3.4"：这个库是一个Babel插件，用于按需加载lodash库的模块，以减小项目的打包体积。 - "cross-env": "^7.0.3"：这个库允许您在不同操作系统上设置环境变量。 - "husky": "^7.0.2"：这个库是一个Git钩子工具，用于在提交代码之前运行一些脚本。 - "lint-staged": "^11.1.2"：这个库用于在提交代码之前对修改的文件进行lint检查。 - "lodash-webpack-plugin": "^0.11.6"：这个库是一个Webpack插件，用于优化lodash库的引入方式。 - "mime": "^2.5.2"：这个库用于解析文件的MIME类型。 - "qiniu": "^7.4.0"：这个库提供了与七牛云存储服务的集成。 - "react-test-renderer": "^17.0.2"：这个库是React的官方测试工具，用于创建和渲染React组件的快照。 - "request": "^2.88.2"：这个库用于发起HTTP请求。 - "typescript": "^4.3.5"：这个库是TypeScript的编译器和类型检查工具。它允许您在JavaScript代码中使用类型注解，并提供类型检查和编译时错误检查的功能。 - 扩展配置：
除了上述功能外，
package.json文件还可以包含其他自定义配置字段，以满足项目的特定需求。 这是一个lint-staged的配置对象，用于在提交代码前对指定的文件进行代码检查和格式化。让我们来逐个解释每个配置项的含义： 1. `"**/.less": "stylelint --syntax less --fix"`：这个配置项指定了对.less文件进行风格检查和修复。`**/.less`表示匹配项目中的所有.less文件。`stylelint`是一个用于检查CSS风格的工具，`--syntax less`表示使用less语法解析.less文件，`--fix`表示在检查时尝试自动修复一些错误。 2. `".{js,jsx,less,md,json}": ["prettier --write"]`：这个配置项指定了对.js、.jsx、.less、.md和.json文件进行格式化。`.{js,jsx,less,md,json}`表示匹配这些文件类型。`prettier`是一个代码格式化工具，`--write`表示在格式化时直接修改文件。 3. `".{js,jsx}": ["eslint --fix"]`：这个配置项指定了对.js和.jsx文件进行代码检查和修复。`.{js,jsx}`表示匹配这些文件类型。`eslint`是一个用于检查JavaScript代码的工具，`--fix`表示在检查时尝试自动修复一些错误。 4. `".ts?(x)": ["prettier --parser=typescript --write", "eslint --fix"]`：这个配置项指定了对.ts或.tsx文件进行代码格式化、检查和修复。`.ts?(x)`表示匹配.ts或.tsx文件。`prettier --parser=typescript --write`表示使用prettier对typescript代码进行格式化。`eslint --fix`表示使用eslint对代码进行检查和修复。 通过这样的lint-staged配置，你可以在提交代码前自动进行代码风格的检查和修复，保证项目的代码质量和一致性。
发布评论