学习package.json

news2024/12/23 3:04:22

package.json 文件，它是项目的配置文件，常见的配置有配置项目启动、打包命令，声明依赖包等。package.json 文件是一个 JSON 对象，该对象的每一个成员就是当前项目的一项设置。

{
  "name": "monorepo_frame",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "install:all": "sh script/installAll.sh",
    "doc:api": "sh script/api_doc.sh",
    "build:ui": "pnpm --filter @web/ui run build ",
    "test:ui": "pnpm --filter @web/ui test ",
    "test:core": "pnpm --filter @web/core test ",
    "dev:exproject": "pnpm --filter @@zqxx/exproject dev ",
    "build:demo": "rimraf docs/demo && pnpm --filter @web/demo build ",
    "dev:rest": "pnpm --filter @web/rest dev ",
    "build:rest": "rimraf docs/rest && pnpm --filter @web/rest build ",
    "build:all": "pnpm run build:demo",
    "publish": " sh script/publish.sh",
    "prettier": "prettier --write ."
  },
  "workspaces": [
    "packages/*"
  ],
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@element-plus/icons": "^0.0.11",
    "@element-plus/icons-vue": "^2.0.10",
    "@types/lodash-es": "*",
    "@types/node": "^17.0.45",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vitejs/plugin-vue-jsx": "^3.0.0",
    "@vue/compiler-sfc": "^3.2.45",
    "element-plus": "2.3.3",
    "eslint": "^8.27.0",
    "minimist": "^1.2.7",
    "mockjs": "^1.1.0",
    "sass": "^1.56.1",
    "typescript": "^4.9.3",
    "unplugin-auto-import": "^0.12.0",
    "unplugin-vue-components": "^0.22.11",
    "vite": "^4.0.0",
    "vite-plugin-dts": "^1.7.1",
    "vite-plugin-mock": "2.9.6",
    "vite-plugin-top-level-await": "^1.2.4",
    "vue": "^3.2.45",
    "vue-router": "^4.1.6",
    "vue-tsc": "^0.32.1"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.0.10",
    "@element-plus/utils": "^0.0.5",
    "@kangc/v-md-editor": "^2.3.15",
    "@vueuse/core": "^8.9.4",
    "codemirror": "^5.65.9",
    "crypto-js": "^4.1.1",
    "echarts": "^5.4.0",
    "highlight.js": "^11.7.0",
    "ismobilejs": "^1.1.1",
    "mockjs": "^1.1.0",
    "normalize.css": "^8.0.1",
    "nprogress": "^0.2.0",
    "pinia": "^2.0.35",
    "pinia-plugin-persistedstate": "^3.1.0",
    "terser": "^5.16.3",
    "vite-plugin-inspect": "^0.7.7",
    "vue-i18n": "9.1.10",
    "vuex": "^4.1.0"
  }
}

当我们克隆一个新的项目到本地时，需要执行 npm install（yarn install）命令来安装项目所需的依赖文件。当执行该命令时，就会根据 package.json 文件中的配置信息来自动下载所需的模块，也就是配置项目所需的运行和开发环境。

一、必须属性

package.json 中最重要的两个字段就是 name 和 version，它们都是必须的，如果没有，就无法正常执行 npm install 命令。npm 规定 package.json 文件是由名称和版本号作为唯一标识符的。

1. name

name 很容易理解，就是项目的名称，它是一个字符串。在给 name 字段命名时，需要注意以下几点：

  • 名称的长度必须小于或等于 214 个字符，不能以 “.” 和“_”开头，不能包含大写字母（这是因为当软件包在 npm 上发布时，会基于此属性获得自己的 URL，所以不能包含非 URL 安全字符（non-url-safe））；

  • 名称可以作为参数被传入 require("")，用来导入模块，所以应当尽可能的简短、语义化；

  • 名称不能和其他模块的名称重复，可以使用 npm view 命令查询模块名是否重复，如果不重复就会提示 404：

  • 如果 npm 包上有对应的包，则会显示包的详细信息：

  • 实际上，我们平时开发的很多项目并不会发布在 npm 上，所以这个名称是否标准可能就不是那么重要，它不会影响项目的正常运行。如果需要发布在 npm 上，name 字段一定要符合要求。

    2. version

    version 字段表示该项目包的版本号，它是一个字符串。在每次项目改动后，即将发布时，都要同步的去更改项目的版本号。版本号的使用规范如下：

  • 版本号的命名遵循语义化版本 2.0.0 规范，格式为：「主版本号. 次版本号. 修订号」，通常情况下，修改主版本号是做了大的功能性的改动，修改次版本号是新增了新功能，修改修订号就是修复了一些 bug；

  • 如果某个版本的改动较大，并且不稳定，可能如法满足预期的兼容性需求，就需要发布先行版本，先行版本通过会加在版本号的后面，通过 “-” 号连接以点分隔的标识符和版本编译信息：内部版本（alpha）、公测版本（beta）和候选版本（rc，即 release candiate）。

二、描述信息

package.jaon 中有五个和项目包描述信息相关的配置字段，下面就分别来看看这些字段的含义。

1. description

description 字段用来描述这个项目包，它是一个字符串，可以让其他开发者在 npm 的搜索中发现我们的项目包。

2. keywords

keywords 字段是一个字符串数组，表示这个项目包的关键词。和 description 一样，都是用来增加项目包的曝光率的。下面是 eslint 包的描述和关键词：

图片

3. author

author 顾名思义就是作者，表示该项目包的作者。它有两种形式，一种是字符串格式：

 

"author": "CUGGZ <xxxxx@xx.com> (https://juejin.cn/user/3544481220801815)"

另一种是对象形式：

"author": {
  "name" : "CUGGZ",
  "email" : "xxxxx@xx.com",
  "url" : "https://juejin.cn/user/3544481220801815"
}
4. contributors

contributors 表示该项目包的贡献者，和 author 不同的是，该字段是一个数组，包含所有的贡献者，它同样有两种写法

"contributors": [
  "CUGGZ0 <xxxxx@xx.com> (https://juejin.cn/user/3544481220801815)",
  "CUGGZ1 <xxxxx@xx.com> (https://juejin.cn/user/3544481220801815)"
 ]
"contributors": [
  {
   "name" : "CUGGZ0",
   "email" : "xxxxx@xx.com",
   "url" : "https://juejin.cn/user/3544481220801815"
 },
  {
   "name" : "CUGGZ1",
   "email" : "xxxxx@xx.com",
   "url" : "https://juejin.cn/user/3544481220801815"
 }
 ]
5. homepage

homepage 就是项目的主页地址了，它是一个字符串。

6. repository

repository 表示代码的存放仓库地址，通常有两种书写形式。第一种是字符串形式

三、依赖配置

通常情况下，我们的项目会依赖一个或者多个外部的依赖包，根据依赖包的不同用途，可以将他们配置在下面的五个属性下：dependencies、devDependencies、peerDependencies、bundledDependencies、optionalDependencies 。下面就来看看每个属性的含义。

1. dependencies

dependencies 字段中声明的是项目的生产环境中所必须的依赖包。当使用 npm 或 yarn 安装 npm 包时，该 npm 包会被自动插入到此配置项中：

npm install <PACKAGENAME>
yarn add <PACKAGENAME>

当在安装依赖时使用 --save 参数，也会将新安装的 npm 包写入 dependencies 属性。

npm install --save <PACKAGENAME>

该字段的值是一个对象，该对象的各个成员，分别由模块名和对应的版本要求组成，表示依赖的模块及其版本范围 

 

"dependencies": {
   "react": "^17.0.2",
   "react-dom": "^17.0.2",
   "react-scripts": "4.0.3",
},

这里每一项配置都是一个键值对（key-value）， key 表示模块名称，value 表示模块的版本号。版本号遵循「主版本号. 次版本号. 修订号」的格式规定：

  • 「固定版本：」 上面的 react-scripts 的版本 4.0.3 就是固定版本，安装时只安装这个指定的版本；

  • 「波浪号：」 比如~ 4.0.3，表示安装 4.0.x 的最新版本（不低于 4.0.3），也就是说安装时不会改变主版本号和次版本号；

  • 「插入号：」 比如上面 react 的版本 ^17.0.2，表示安装 17.x.x 的最新版本（不低于 17.0.2），也就是说安装时不会改变主版本号。如果主版本号为 0，那么插入号和波浪号的行为是一致的；

  • latest：安装最新的版本。

需要注意，不要把测试或者过渡性的依赖放在 dependencies，避免生产环境出现意外的问题。

2. devDependencies

devDependencies 中声明的是开发阶段需要的依赖包，如 Webpack、Eslint、Babel 等，用于辅助开发。它们不同于 dependencies，因为它们只需安装在开发设备上，而无需在生产环境中运行代码。当打包上线时并不需要这些包，所以可以把这些依赖添加到 devDependencies 中，这些依赖依然会在本地指定 npm install 时被安装和管理，但是不会被安装到生产环境中。

当使用 npm 或 yarn 安装软件包时，指定以下参数后，新安装的 npm 包会被自动插入到此列表中：


npm install --save-dev <PACKAGENAME>
yarn add --dev <PACKAGENAME>
"devDependencies": {
  "autoprefixer": "^7.1.2",
  "babel-core": "^6.22.1"
}
3. peerDependencies

有些情况下，我们的项目和所依赖的模块，都会同时依赖另一个模块，但是所依赖的版本不一样。比如，我们的项目依赖 A 模块和 B 模块的 1.0 版，而 A 模块本身又依赖 B 模块的 2.0 版。大多数情况下，这不是问题，B 模块的两个版本可以并存，同时运行。但是，有一种情况，会出现问题，就是这种依赖关系将暴露给用户。

最典型的场景就是插件，比如 A 模块是 B 模块的插件。用户安装的 B 模块是 1.0 版本，但是 A 插件只能和 2.0 版本的 B 模块一起使用。这时，用户要是将 1.0 版本的 B 的实例传给 A，就会出现问题。因此，需要一种机制，在模板安装的时候提醒用户，如果 A 和 B 一起安装，那么 B 必须是 2.0 模块。

peerDependencies 字段就是用来供插件指定其所需要的主工具的版本。


"name": "chai-as-promised",
"peerDependencies": {
   "chai": "1.x"
}

上面代码指定在安装 chai-as-promised 模块时，主程序 chai 必须一起安装，而且 chai 的版本必须是 1.x。如果项目指定的依赖是 chai 的 2.0 版本，就会报错。

需要注意，从 npm 3.0 版开始，peerDependencies 不再会默认安装了。

4. optionalDependencies

如果需要在找不到包或者安装包失败时，npm 仍然能够继续运行，则可以将该包放在 optionalDependencies 对象中，optionalDependencies 对象中的包会覆盖 dependencies 中同名的包，所以只需在一个地方进行设置即可。

需要注意，由于 optionalDependencies 中的依赖可能并未安装成功，所以一定要做异常处理，否则当获取这个依赖时，如果获取不到就会报错。

5. bundledDependencies

上面的几个依赖相关的配置项都是一个对象，而 bundledDependencies 配置项是一个数组，数组里可以指定一些模块，这些模块将在这个包发布时被一起打包。

需要注意，这个字段数组中的值必须是在 dependencies, devDependencies 两个里面声明过的包才行。

6. engines

当我们维护一些旧项目时，可能对 npm 包的版本或者 Node 版本有特殊要求，如果不满足条件就可能无法将项目跑起来。为了让项目开箱即用，可以在 engines 字段中说明具体的版本号：

"engines": {
 "node": ">=8.10.3 <12.13.0",
  "npm": ">=6.9.0"
}

需要注意，engines 只是起一个说明的作用，即使用户安装的版本不符合要求，也不影响依赖包的安装。

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1126361.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

FTP服务器操作手册

FTP服务器操作手册

FTP服务器(File Transfer Protocol Server)是在互联网上提供文件存储和访问服务的计算机&#xff0c;它们依照FTP协议提供服务。FTP协议是File Transfer Protocol(文件传输协议)&#xff0c;专门用来传输文件的协议。FTP服务器是企业里经常用到的服务器&#xff0c;今天就介绍一…
阅读更多...
RGB与YUV公式转换推导

RGB与YUV公式转换推导

目录 简介 Full Range公式推导 Limit Range推导 验证测试 参考资料 简介 RGB与YUV之间的转换有很多种标准&#xff0c;不同标准系数不一样&#xff0c;而且经常容易搞混淆&#xff0c;另外还有full range和limitrange的不同。其实这些转换系数都是推导出来的&#xff0c;…
阅读更多...
【通览一百个大模型】Baize（UCSD）

【通览一百个大模型】Baize（UCSD）

【通览一百个大模型】Baize&#xff08;UCSD&#xff09; 作者&#xff1a;王嘉宁&#xff0c;本文章内容为原创&#xff0c;仓库链接&#xff1a;https://github.com/wjn1996/LLMs-NLP-Algo 订阅专栏【大模型&NLP&算法】可获得博主多年积累的全部NLP、大模型和算法干货…
阅读更多...
【数据结构与算法】two X 树的遍历以及功能实现

【数据结构与算法】two X 树的遍历以及功能实现

前言&#xff1a; 前面我们已经提到过树、二叉树的概念及结构、堆排序、Top-k问题等的知识点&#xff0c;这篇文章我们来详解一下二叉树的链式结构等问题。 &#x1f4a5;&#x1f388;个人主页:​​​​​​Dream_Chaser&#xff5e; &#x1f388;&#x1f4a5; ✨✨专栏:htt…
阅读更多...
JVM工具使用（jstat + jmap）

JVM工具使用（jstat + jmap）

命令格式 jstat -gcutil pid interval(ms) 举例&#xff1a; jstat -gcutil 16361 1000 线上服务器的GC情况如下&#xff1a; 参数说明如下&#xff1a; S0: 新生代中Survivor space 0区已使用空间的百分比S1: 新生代中Survivor space 1区已使用空间的百分比E: 新生代已使用空…
阅读更多...
ETL实现实时文件监听

ETL实现实时文件监听

一、实时文件监听的作用及应用场景 实时文件监听是一种监测指定目录下的文件变化的技术&#xff0c;当产生新文件或者文件被修改时&#xff0c;可实时提醒用户并进行相应处理。这种技术广泛应用于数据备份、日志管理、文件同步和版本控制等场景&#xff0c;它可以帮助用户及时…
阅读更多...
Nacos 下载运行及配置

Nacos 下载运行及配置

Nacos 服务注册与配置中心&#xff0c;兼顾两者 文章目录 Nacos 服务注册与配置中心&#xff0c;兼顾两者一、简介二、相关文档2.1 Nacos官网2.2 官方文档 三、下载并运行Nacos3.1 下载压缩包3.2 解压缩3.3 运行命令3.4 访问Nacos控制台 附录&#xff1a;各种注册中心比较 Naco…
阅读更多...
CAS是“Compare and Swap“（比较并交换）

CAS是“Compare and Swap“（比较并交换）

CAS是"Compare and Swap"&#xff08;比较并交换&#xff09; 一&#xff0c;介绍 CAS是"Compare and Swap"&#xff08;比较并交换&#xff09;的缩写&#xff0c;是一种多线程同步的原子操作。它基于硬件的原子性保证&#xff0c;用于解决并发环境下的…
阅读更多...
在前台页面中console怎么查vue.prototype

在前台页面中console怎么查vue.prototype

在测试项目接口时发现调用接口调用异常&#xff0c;怀疑可能是网省配置问题 1. 打开前台页面。 2. 右键点击页面&#xff0c;选择"检查元素"或者"审查元素"。 3. 在打开的开发者工具中&#xff0c;选择"控制台"选项卡。 4. 在控制台中输入以下代…
阅读更多...
TCP通信实战案例-即时通信

TCP通信实战案例-即时通信

即时通信是什么含义&#xff0c;要实现怎么样的设计&#xff1f; 即时通信&#xff0c;是指一个客户端的消息发出去&#xff0c;其他客户端可以接收到。 即时通信需要进行端口转发的设计思想。 服务端需要把在线的Socket管道存储起来。 一旦收到一个消息要推送给其他管道。…
阅读更多...
05-01 jdk,tomcat,mariadb数据库和profile多环境

05-01 jdk,tomcat,mariadb数据库和profile多环境

1.卸载系统默认安装jdk # java -version # rpm -qa|grep openjdk -i # rpm - e --nodeps 需要删除的软件2.安装jdk 2.1新建jdk安装目录并解压 # mkdir /usr/java # cd /usr/ # tar -zxvf jdk-8u191-linux-x64.tar.gz # mv jdk-8u191/ /usr/java/2.2配置环境变量 # vim /etc/…
阅读更多...
【Javascript】等于与全等于

【Javascript】等于与全等于

var a1;if(a1){console.log(你好&#xff01;&#xff01;);} 如果a赋值为 1 的时候 var a1;if(a1){console.log(你好&#xff01;&#xff01;);}仍然会执行 console.log(你好&#xff01;&#xff01;); 所以在开发中如果if语句里要使用等于的时候使用 var a1;if(a1)…
阅读更多...
编程小白的自学笔记十七（python办公自动化操作EXCEL表格之作图）

编程小白的自学笔记十七（python办公自动化操作EXCEL表格之作图）

系列文章目录 编程小白的自学笔记十六&#xff08;python办公自动化操作EXCEL表格&#xff09; 编程小白的自学笔记十五&#xff08;python办公自动化操作EXCEL表格&#xff09; 编程小白的自学笔记十四&#xff08;python办公自动化创建、复制、移动文件和文件夹 编程小白…
阅读更多...
Qt 项目实战 | 多界面编辑器

Qt 项目实战 | 多界面编辑器

Qt 项目实战 | 多界面编辑器 Qt 项目实战 | 多界面编辑器界面设计创建子窗口类 官方博客&#xff1a;https://www.yafeilinux.com/ Qt开源社区&#xff1a;https://www.qter.org/ 参考书&#xff1a;《Qt 及 Qt Quick 开发实战精解》 Qt 项目实战 | 多界面编辑器 开发环境&…
阅读更多...
运行segment anything模型的web demo 教程

运行segment anything模型的web demo 教程

这个web应用放在在源码的demo文件夹里&#xff1a; 这个前端仅基于React的web演示了如何加载固定图像和相应的SAM image embedding的.npy文件。 运行需要配置npm环境。 首先导出onnx的模型&#xff1a; import torch import numpy as np import cv2 import matplotlib.pyplo…
阅读更多...
解决 Vue3 + Element Plus 树形表格全选多选以及子节点勾选的问题

解决 Vue3 + Element Plus 树形表格全选多选以及子节点勾选的问题

原文链接&#xff1a; 解决 Vue3 Element Plus 树形表格全选多选以及子节点勾选的问题 前言 最近用到了 Element Plus 组件库的中的树形表格&#xff0c;但官网例子只能做到一层勾选&#xff0c;不能做到多层勾选&#xff0c;无法满足业务需求&#xff0c;所以研究了下&#…
阅读更多...
PHP 预定义超全局变量 笔记/练习

PHP 预定义超全局变量 笔记/练习

预定义超全局数组变量 $_FILES 练习在最后 其他练习跟在每条笔记后 概述 预定义&#xff1a;预定义变量是 PHP 已定义&#xff0c;可以直接使用超全局&#xff1a;作用域是全局&#xff0c;可以在脚本的任何地方&#xff08;包括函数内部、外部&#xff09;都可以进行访问 常…
阅读更多...
CSS必学：你需要知道的盒子模型的秘密

CSS必学：你需要知道的盒子模型的秘密

作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 &#x1f449; WangMin 作为前端开发来说&#xff0c;要掌握的CSS基础一定很多&#xff0c;那么CSS中盒子模型肯定是必考必问必掌握的前端知识点&#xff0c;因为它是CSS基础中非常重要的内容&#xff0c;…
阅读更多...
分步实现编写LED驱动，实现特备文件和设备的绑定

分步实现编写LED驱动，实现特备文件和设备的绑定

通过字符设备驱动的分步实现编写LED驱动&#xff0c;另外实现特备文件和设备的绑定&#xff0c;发布到CSDN head.h #ifndef __HEAD_H__ #define __HEAD_H__ typedef struct {unsigned int MODER;unsigned int OTYPER;unsigned int OSPEEDR;unsigned int PUPDR;unsigned int ID…
阅读更多...
photoshop2024免费插件Portraiture3

photoshop2024免费插件Portraiture3

随着手机摄影的普及&#xff0c;修图可以说是现代人的必备生活技能之一了&#xff0c;现在谁发个朋友圈不把自己的照片修的美美的呢&#xff1f;那么如何拥有一张氛围感满满的照片呢&#xff1f;这不得不提图片处理软件中的王牌——photoshop。作为专业的图片处理软件&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023