本文转载自微信公众号「精益码农」，大前端快作者有态度的闪P少马甲。转载本文请联系精益码农公众号。文件

最近在公司某项目参与了一些前端工作，知多作为后端抠脚大汉，大前端快改点前端细节磕磕绊绊，闪P少改点大前端、文件工程化、知多HTTP交互倒也还能做到柳暗花明。大前端快

于是闪P少打算用后端程序猿的视角记录一些{ 大前端}的知识快闪，也算是文件帮助读者构建完整的全栈技能体系。

快闪一：paakage.json文件知多少

如果你使用了nodejs、知多npm项目、大前端快Angular项目等，闪P少你都会用到package.json文件，文件package.json文件是项目的清单文件，package.json在react项目开发和部署阶段扮演了重要角色。网站模板

Package.json = 项目元信息+ 依赖的组件版本+ 脚本

请看下面的package.json示例文件:

{    "name": "first-react-app",   "version": "0.1.0",   "private": true,   "dependencies": {      "@testing-library/jest-dom": "^5.14.1",     "@testing-library/react": "^11.2.7",     "@testing-library/user-event": "^12.8.3",     "react": "^17.0.2",     "react-dom": "^17.0.2",     "react-scripts": "4.0.3",     "web-vitals": "^1.1.2"   },   "scripts": {      "start": "react-scripts start",     "build": "react-scripts build",     "test": "react-scripts test",     "eject": "react-scripts eject"   },   "eslintConfig": {      "extends": [       "react-app",       "react-app/jest"     ]   },   "browserslist": {      "production": [       ">0.2%",       "not dead",       "not op_mini all"     ],     "development": [       "last 1 chrome version",       "last 1 firefox version",       "last 1 safari version"     ]   } } 

庖丁解牛，深入分析。

Name：react项目的名称

需要满足以下约定：

① name 应使用小写

② name应该少于214字符

③ 可以使用- 或者_

Version: 当前项目的版本，需要满足以下约定

x.x.x - major.minor.patches

Private: 这是一个重要的属性，主要用于防止私有代码库的意外发布。如果为true，则不会发布到公开的npm生态系统。

Dependencies：包含一系列的node module + 生产环境依赖的版本，上面的例子中，我们需要以下版本的依赖：

"react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3", 

react版本：^17.0.2，意味着npm将安装与“17.x.x”匹配的最新版本。服务器托管

Scripts: 包含常见的[react命令脚本]的别名。

"scripts": {      "start": "react-scripts start",     "build": "react-scripts build",     "test": "react-scripts test",     "eject": "react-scripts eject"   } 

npm start将会执行 react-scripts start

Browserlist: 这个属性用于在不同的前端工具之间共享目标浏览器和node.js版本。

eslintconfig:该属性包括Create React App使用的可共享ESLint配置。

devDependeties: 这个属性不在上面的示例代码中，但它非常重要，因此还是要啰嗦它：这个属性列出了开发和测试所需的包。

以上是package.json文件中最重要的几个属性，下面啰嗦一下版本语法：x.x.x： major.minor.patches

版本语法中有些特殊符号：

1. ~: Update patch release only. Eg. If you set ^17.0.2 then 17.0.3 will be ok but 18.0.2 will not work.

2. ^: Can update patch + minor. Not major version

3. *: Can update all three major + minor + patches versions

4. >: Higher version than specify a version.

5. >=: Equal and Higher than specify a version

6. <: Less than specifying a version

7. <=: Less or equal to specify a version

这就是快闪一：package.json知多少 的全部，现在是不是对于package.json文件的作用有了更深刻的认识了图片。云服务器