大前端快闪:Package.Json文件知多少?

开发 开发工具
如果你使用了nodejs、npm项目、Angular项目等,你都会用到package.json文件,package.json文件是项目的清单文件,package.json在react项目开发和部署阶段扮演了重要角色。

[[425672]]

本文转载自微信公众号「精益码农」,作者有态度的马甲。转载本文请联系精益码农公众号。

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

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

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

如果你使用了nodejs、npm项目、Angular项目等,你都会用到package.json文件,package.json文件是项目的清单文件,package.json在react项目开发和部署阶段扮演了重要角色。

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

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

  1.   "name""first-react-app"
  2.   "version""0.1.0"
  3.   "private"true
  4.   "dependencies": { 
  5.     "@testing-library/jest-dom""^5.14.1"
  6.     "@testing-library/react""^11.2.7"
  7.     "@testing-library/user-event""^12.8.3"
  8.     "react""^17.0.2"
  9.     "react-dom""^17.0.2"
  10.     "react-scripts""4.0.3"
  11.     "web-vitals""^1.1.2" 
  12.   }, 
  13.   "scripts": { 
  14.     "start""react-scripts start"
  15.     "build""react-scripts build"
  16.     "test""react-scripts test"
  17.     "eject""react-scripts eject" 
  18.   }, 
  19.   "eslintConfig": { 
  20.     "extends": [ 
  21.       "react-app"
  22.       "react-app/jest" 
  23.     ] 
  24.   }, 
  25.   "browserslist": { 
  26.     "production": [ 
  27.       ">0.2%"
  28.       "not dead"
  29.       "not op_mini all" 
  30.     ], 
  31.     "development": [ 
  32.       "last 1 chrome version"
  33.       "last 1 firefox version"
  34.       "last 1 safari version" 
  35.     ] 
  36.   } 

庖丁解牛,深入分析。

Name:react项目的名称

需要满足以下约定:

① name 应使用小写

② name应该少于214字符

③ 可以使用- 或者_

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

x.x.x - major.minor.patches

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

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

  1. "react""^17.0.2"
  2. "react-dom""^17.0.2"
  3. "react-scripts""4.0.3"

react版本:^17.0.2,意味着npm将安装与“17.x.x”匹配的最新版本。

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

  1. "scripts": { 
  2.     "start""react-scripts start"
  3.     "build""react-scripts build"
  4.     "test""react-scripts test"
  5.     "eject""react-scripts eject" 
  6.   } 

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文件的作用有了更深刻的认识了图片。

 

责任编辑:武晓燕 来源: 精益码农
相关推荐

2022-06-10 09:00:53

前端项目个JSON

2022-09-30 15:35:47

json 文件前端开源

2024-02-02 08:50:20

Node.js元数据自动化

2021-04-23 11:18:55

npmpackage.jso命令

2021-12-11 18:59:35

JavascriptJSON应用

2023-09-18 10:11:25

前端工具

2024-06-18 14:01:17

2012-02-13 22:50:59

集群高可用

2024-08-06 10:07:15

2021-09-27 06:29:02

React开发模式

2021-09-29 19:16:07

前端React配置

2010-08-16 09:15:57

2013-12-23 14:00:31

Windows 8.2Windows 8.1

2021-12-04 11:17:32

Javascript继承编程

2017-07-14 10:51:37

性能优化SQL性能分析

2020-05-08 07:00:00

Linux色码文件类型

2021-07-22 07:20:24

JS 遍历方法前端

2020-09-08 10:56:55

Java多线程存储器

2018-08-31 10:53:25

MySQL存储引擎

2009-05-13 17:31:06

DBAOracleIT
点赞
收藏

51CTO技术栈公众号