前端package.json文件详解
简介
package.json
文件是 Node.js 项目的配置文件,用于描述项目的元数据和依赖关系。它是一个 JSON 格式的文件,位于项目根目录下。在这个文件中,你可以定义项目的名称、版本号、作者、许可证等项目信息,并且可以列出项目所需的依赖包和脚本。
在创建新的 Node.js 项目时,通常会通过运行 npm init
命令来生成 package.json
文件。你可以手动编辑该文件,或者使用 npm install
命令来安装新的依赖包,package.json
文件会自动更新。
示例及说明
示例
{ "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 https://github.com/NgeKaworu/js-sdk.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配置,你可以在提交代码前自动进行代码风格的检查和修复,保证项目的代码质量和一致性。