package.json配置

package.json配置

      • 描述配置
      • 文件配置
      • 脚本配置
      • 依赖配置
      • 发布配置
      • 系统配置
      • 第三方配置

描述配置

  • name : 项目名称，第三方包可以通过npm install 包名安装

    • "name":"react"

  • version : 项目版本，项目版本号

    • "version" : "18.2.0"

  • repository : 仓库地址及版本控制信息

    • "repository": {"type": "git","url": "https://github.com/facebook/react.git","directory": "packages/react"
}

  • decription : 项目描述,会展示在 npm 官网，让别人能快速了解该项目

    • "description": "React is a JavaScript library for building user interfaces."

  • keyword : 技术关键词,好的关键词可以帮助别人在 npm 官网上更好地检索到此项目，增加曝光率

    • "keywords": ["ant","component","components","design","framework","frontend","react","react-component","ui"
],

  • homepage : 项目主页的链接，通常是项目 github 链接，项目官网或文档首页

    • "homepage": "https://reactjs.org/"

  • bugs : 项目 bug 反馈地址，通常是 github issue 页面的链接

    • "bugs": "https://github.com/vuejs/core/issues"

  • license : 项目的开源许可证

    • "license": "MIT"

  • author : 项目作者

    • "author": "xiaoming"

  • contributors : 该项目包的贡献者

    • "contributors": ["xxxx <xxxxx@xx.com>","xxxx <xxxxx@xx.com> "
]"contributors": [{"name" : "xxxxx","email" : "xxxxx@xx.com","url" : "https://xxxxx"},{"name" : "xxxxx","email" : "xxxxx@xx.com","url" : "https://xxxxx"}
]

文件配置

  • files : 项目在进行 npm 发布时，可以通过 files 指定需要跟随一起发布的内容来控制 npm 包的大小，避免安装时间太长，发布时默认会包括 package.json，license，README 和main 字段里指定的文件。忽略 node_modules，lockfile 等文件，在此基础上，我们可以指定更多需要一起发布的内容。可以是单独的文件，整个文件夹，或者使用通配符匹配到的文件

    • "files": ["filename.js","directory/","glob/*.{js,json}"
]

  • type : 在 node 支持 ES 模块后，要求 ES 模块采用 .mjs 后缀文件名。只要遇到 .mjs 文件，就认为它是 ES 模块。如果不想修改文件后缀，就可以在 package.json文件中，指定 type 字段为 module

    • "type": "module"

  • main : 项目发布时，默认会包括 package.json，license，README 和main 字段里指定的文件，因为 main 字段里指定的是项目的入口文件，在 browser 和 Node 环境中都可以使用，如果不设置 main 字段，那么入口文件就是根目录下的 index.js

    • "main": "./index.js"

  • browser : main 字段里指定的入口文件在 browser 和 Node 环境中都可以使用。如果只想在 web 端使用，不允许在 server 端使用，可以通过 browser 字段指定入口

    • "browser": "./browser/index.js"

  • module : 项目也可以指定 ES 模块的入口文件，这就是 module 字段的作用

    • "module": "./index.mjs"

    • 当一个项目同时定义了 main，browser 和 module，像 webpack，rollup 等构建工具会感知这些字段，并会根据环境以及不同的模块规范来进行不同的入口文件查找

  • exports : node 在 14.13 支持在 package.json 里定义 exports 字段，拥有了条件导出的功能，exports 字段可以配置不同环境对应的模块入口文件，并且当它存在时，它的优先级最高

    • "exports": {"require": "./index.js","import": "./index.mjs"

    • 这样的配置在使用 import ‘xxx’ 和 require(‘xxx’) 时会从不同的入口引入文件

    • 上面的写法等同于

    • "exports": {".": {"require": "./index.js","import": "./index.mjs"}
}

    • exports 除了支持配置包的默认导出，还支持配置包的子路径

    • "exports": {"./style": "./dist/css/index.css"
},

    • //原来的引入
import `packageA/dist/css/index.css`;
// 用户引入时
import `packageA/style`;

    • 除了对导出的文件路径进行封装，exports 还限制了使用者不可以访问未在 “exports” 中定义的任何其他路径。比如发布的 dist 文件里有一些内部模块 dist/internal/module ，被用户单独引入使用的话可能会导致主模块不可用。为了限制外部的使用，我们可以不在 exports 定义这些模块的路径，这样外部引入 packageA/dist/internal/module 模块的话就会报错。

  • workspaces : 项目的工作区配置，用于在本地的根目录下管理多个子项目。可以自动地在 npm install 时将 workspaces 下面的包，软链到根目录的 node_modules 中，不用手动执行 npm link 操作

    • "workspaces": ["workspace-a"
]

    • 表示在 workspace-a 目录下还有一个项目，它也有自己的 package.json。

    • 通常子项目都会平铺管理在 packages 目录下，所以根目录下 workspaces 通常配置为

    • "workspaces": ["packages/*"
]

脚本配置

  • script : 指定项目的一些内置脚本命令，这些命令可以通过 npm run 来执行。通常包含项目开发，构建 等 CI 命令

    • "scripts": {"build": "webpack"
}

    • 除了指定基础命令，还可以配合 pre 和 post 完成命令的前置和后续操作

    • "scripts": {"build": "webpack","prebuild": "xxx", // build 执行之前的钩子"postbuild": "xxx" // build 执行之后的钩子
}

    • 执行 npm run build 命令时，会按照 prebuild -> build -> postbuild 的顺序依次执行上方的命令(pnpm和yarn2已经废弃这种操作)

  • config : 设置 scripts 里的脚本在运行时的参数

    • # 设置端口号
"config": {"port": "3001"
}
# 在执行脚本时，我们可以通过 npm_package_config_port 这个变量访问到 3001

依赖配置

  • dependencies : 运行依赖，也就是项目生产环境下需要用到的依赖

    • "dependencies": {"react": "^18.2.0","react-dom": "^18.2.0"
}

  • devDependencies : 开发依赖，项目开发环境需要用到而运行时不需要的依赖，用于辅助开发

    • "devDependencies": {"webpack": "^5.69.0"
}

  • perDependencies : 同伴依赖，一种特殊的依赖，不会被自动安装，通常用于表示与另一个包的依赖与兼容性关系来警示使用者。

    • 比如我们安装 A，A 的正常使用依赖 B@2.x 版本，那么 B@2.x 就应该被列在 A 的 peerDependencies 下，表示“如果你使用我，那么你也需要安装 B，并且至少是 2.x 版本

    • "peerDependencies": {"react": ">=16.9.0","react-dom": ">=16.9.0"
}

  • optionalDependencies : 可选依赖，顾名思义，表示依赖是可选的，它不会阻塞主功能的使用，安装或者引入失败也无妨。这类依赖如果安装失败，那么 npm 的整个安装过程也是成功的

    • "optionalDependencies": {"colors": "^1.4.0"
}

  • peerDependenciesMeta : 同伴依赖也可以使用 peerDependenciesMeta 将其指定为可选的

    • "peerDependencies": {"colors": "^1.4.0"
},
"peerDependenciesMeta": {"colors": {"optional": true}
}

  • bundleDependencies : 打包依赖。它的值是一个数组，在发布包时，bundleDependencies 里面的依赖都会被一起打包

    • "bundleDependencies": ["react","react-dom"
]
# 在执行 npm pack 打包生成 tgz 压缩包中，将出现 node_modules 并包含 react 和 react-dom
# 需要注意的是，这个字段数组中的值必须是在 dependencies，devDependencies 两个里面声明过的依赖才行

  • overrides : overrides 可以重写项目依赖的依赖，及其依赖树下某个依赖的版本号，进行包的替换

    • # 某个依赖 A，由于一些原因它依赖的包 foo@1.0.0 需要替换，我们可以使用 overrides 修改 foo 的版本号：
"overrides": {"foo": "1.1.0-patch"
}
# 当然这样会更改整个依赖树里的 foo，我们可以只对 A 下的 foo 进行版本号重写
"overrides": {"A": {"foo": "1.1.0-patch",}
}

发布配置

  • private : 如果是私有项目，不希望发布到公共 npm 仓库上，可以将 private 设为 true

    • "private": true

  • publishConfig : npm 包发布时使用的配置

    • # 比如在安装依赖时指定了 registry 为 taobao 镜像源，但发布时希望在公网发布，就可以指定 publishConfig.registry
"publishConfig": {"registry": "https://registry.npmjs.org/"
}

系统配置

  • engines : 一些项目由于兼容性问题会对 node 或者包管理器有特定的版本号要求

    • "engines": {"node": ">=14 <16","pnpm": ">7"
}

  • os : 在 linux 上能正常运行的项目可能在 windows 上会出现异常，使用 os 字段可以指定项目对操作系统的兼容性要求

    • "os": ["darwin", "linux"]

  • cpu : 指定项目只能在特定的 CPU 体系上运行

    • "cpu": ["x64", "ia32"]

第三方配置

  • types/typings : 指定 TypeScript 的类型定义的入口文件

    • "types": "./index.d.ts",

  • unpkg : 让 npm 上所有的文件都开启 CDN 服务

    • "unpkg": "dist/vue.global.js"
# 当我们想通过 CDN 的方式使用链接引入 vue 时。访问 unpkg.com/vue 会重定向到 unpkg.com/vue@3.2.37/… 3.2.27 是 Vue 的最新版本。

  • jsdelivr : 与 unpkg 类似

    • "jsdelivr": "dist/vue.global.js",
# 访问 cdn.jsdelivr.net/npm/vue 实际上获取到的是 jsdelivr 字段里配置的文件地址

  • browserslist : 设置项目的浏览器兼容情况，babel 和 autoprefixer 等工具会使用该配置对代码进行转换。当然你也可以使用 .browserslistrc 单文件配置。

    • "browserslist": ["> 1%","last 2 versions"
]

  • sideEffects : 显示设置某些模块具有副作用，用于 webpack 的 tree-shaking 优化

    • 比如在项目中整体引入 Ant Design 组件库的 css 文件。

    • import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

    • 如果 Ant Design 的 package.json 里不设置 sideEffects，那么 webapck 构建打包时会认为这段代码只是引入了但并没有使用，可以 tree-shaking 剔除掉，最终导致产物缺少样式。
      所以 Ant Design 在 package.json 里设置了如下的 sideEffects，来告知 webpack，这些文件具有副作用，引入后不能被删除

    • "sideEffects": ["dist/*","es/**/style/*","lib/**/style/*","*.less"
]

  • lint-staged : 用于对 git 的暂存区的文件进行操作的工具，比如可以在代码提交前执行 lint 校验，类型检查，图片优化等操作

    • "lint-staged": {"src/**/*.{js,jsx,ts,tsx}": ["eslint --fix","git add -A"]
}

    • lint-staged 通常配合 husky 这样的 git-hooks 工具一起使用。git-hooks 用来定义一个钩子，这些钩子方法会在 git 工作流程中比如 pre-commit，commit-msg 时触发，可以把 lint-staged 放到这些钩子方法中

  • eslintConfig : eslint的配置可以写在单独的配置文件.eslintrc.json 中，也可以写在package.json文件的eslintConfig配置项中

    • "eslintConfig": {"root": true,"env": {"node": true},"extends": ["plugin:vue/essential","eslint:recommended"],"rules": {},"parserOptions": {"parser": "babel-eslint"},
}

  • babel : babel用来指定Babel的编译配置

    • "babel": {"presets": ["@babel/preset-env"],"plugins": [...]
}

  • gitHooks : gitHooks用来定义一个钩子，在提交（commit）之前执行ESlint检查。在执行lint命令后，会自动修复暂存区的文件。修复之后的文件并不会存储在暂存区，所以需要用git add命令将修复后的文件重新加入暂存区。在执行pre-commit命令之后，如果没有错误，就会执行git commit命令

    • "gitHooks": {"pre-commit": "lint-staged"
}

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

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

相关文章

Ubuntu 启动引导如何修复（直接进入grub怎么办）

Ubuntu 启动引导如何修复（直接进入grub怎么办）

如果 Ubuntu 系统启动时直接进入 GRUB 界面&#xff0c;而不是直接启动操作系统&#xff0c;原因是&#xff1a; GRUB 配置文件丢失或损坏 解决方法 一、手动引导系统&#xff08;临时方案&#xff09; GRUB 的配置文件&#xff08;/boot/grub/grub.cfg&#xff09;损坏。通…
阅读更多...
华为Eth-trunk链路聚合加入到E-trunk实现跨设备的链路聚合

华为Eth-trunk链路聚合加入到E-trunk实现跨设备的链路聚合

一、适用场景&#xff08;注&#xff1a;e-trunk与eth-trunk是2个不同的概念&#xff09; 1、企业中有重要的server服务器业务不能中断的情况下&#xff0c;可将上行链路中的汇聚交换机&#xff0c;通过eth-trunk链路聚合技术&#xff0c;实现链路故障后&#xff0c;仍有可用的…
阅读更多...
灵当CRM data/pdf.php 任意文件读取漏洞复现

灵当CRM data/pdf.php 任意文件读取漏洞复现

0x01 产品简介 灵当CRM是一款专为中小企业打造的智能客户关系管理工具，由上海灵当信息科技有限公司开发并运营。广泛应用于金融、教育、医疗、IT服务、房地产等多个行业领域，帮助企业实现客户个性化管理需求，提升企业竞争力。无论是新客户开拓、老客户维护，还是销售过程管…
阅读更多...
vue3 高德地图标注（飞线，呼吸点）效果

vue3 高德地图标注（飞线，呼吸点）效果

装下这两个 npm 忘了具体命令了&#xff0c;百度一下就行 “loca”: “^1.0.1”, “amap/amap-jsapi-loader”: “^1.0.1”, <template><div id"map" style"width: 100%;height: 100%;"></div> </template><script setup> …
阅读更多...
Cesium 区域高程图

Cesium 区域高程图

Cesium 区域高程图 const terrainAnalyse new HeightMapMaterial({viewer,style: {stops: [0, 0.05, 0.5, 1],//颜色梯度设置colors: [green, yellow, blue , red],}});
阅读更多...
NVIDIA Bluefield DPU上的启动流程4个阶段分别是什么？作用是什么？

NVIDIA Bluefield DPU上的启动流程4个阶段分别是什么？作用是什么？

文章目录 Bluefield上的硬件介绍启动流程启动流程&#xff1a;eMMC中的两个存储分区&#xff1a;ATF介绍ATF启动的四个阶段&#xff1a; 四个主要步骤&#xff1a;各个阶段依赖的启动文件 一次烧录fw失败后的信息看启动流程综述 Bluefield上的硬件介绍 本文以Bluefield2为例&a…
阅读更多...
在 Android Studio 中引入android.os.SystemProperties

在 Android Studio 中引入android.os.SystemProperties

在 Android Studio 中引入android.os.SystemProperties 前言 网上有很多种方法&#xff0c;其中直接导入包的办法是行不通的&#xff0c;昨天自己发现问题后也踩了很多坑&#xff0c;现在把问题解决了也全面汇总了几种方法&#xff0c;确保可以百分百引入 1. layoutlib.jar包…
阅读更多...
计算机是如何输入存储输出汉字、图片、音频、视频的

计算机是如何输入存储输出汉字、图片、音频、视频的

计算机是如何输入存储输出汉字、图片、音频、视频的 为了便于理解&#xff0c;先了解一下计算机的组成。 冯诺依曼计算机的五大组成部分。分别是运算器、控制器、存储器、输入设备和输出设备。参见下图&#xff1a; 一、运算器 运算器又称“算术逻辑单元”&#xff0c;是计算…
阅读更多...
SQLI LABS | SQLI LABS 靶场初识

SQLI LABS | SQLI LABS 靶场初识

关注这个靶场的其它相关笔记&#xff1a;SQLI LABS —— 靶场笔记合集-CSDN博客 0x01&#xff1a;SQLI LABS 靶场简介 SQLi-Labs 靶场是一个专门用于学习和测试 SQL 注入漏洞的开源靶场&#xff0c;该靶场提供了多个具有不同漏洞类型和难度级别的 Web 应用程序的环境。这些应用…
阅读更多...
Facebook减肥产品广告投放攻略

Facebook减肥产品广告投放攻略

有不少刚开始投放facebook广告的小伙伴会感到疑惑&#xff0c;为什么别人的减肥产品跑的风生水起&#xff0c;销量羡煞旁人&#xff0c;自己的广告要不就是被拒要不就是没有流量&#xff0c;甚至还可能被封号&#xff0c;如果你也有这样的困扰&#xff0c;那一定要看完这篇文章…
阅读更多...
【golang】gorm 使用map实现in 条件查询用法

【golang】gorm 使用map实现in 条件查询用法

当 where 字典的值为数组时 gorm 会自动转换为条件 IN 查询 where : map[string]interface{}{} where["id"] [1,2,3] where["name"] "zhangsan"type userList struct {Id int "gorm:id"Name string "gorm:name" } Table.…
阅读更多...
图片颜色通道提取

图片颜色通道提取

目录 读取和显示图像分离和合并颜色通道通道分离显示总结 读取和显示图像 import cv2def img_show(name, img):"""显示图片:param name: 窗口名字:param img: 图片对象:return: None"""cv2.imshow(name, img)cv2.waitKey(0)cv2.destroyAllWindow…
阅读更多...
【运维篇】redis运维管理及redis-cli 常用命令

【运维篇】redis运维管理及redis-cli 常用命令

一、文章介绍 本篇文章主要从一个Redis管理员&#xff0c;运维者的角度进行介绍&#xff0c;方便我们排查我解决问题。 redis-cli 是原生 Redis 自带的命令行工具&#xff0c;您可以在云主机或本地设备上通过 redis-cli 连接 Redis 数据库&#xff0c;进行数据管理。 更多 r…
阅读更多...
机器视觉AI场景为什么用Python比C++多？

机器视觉AI场景为什么用Python比C++多？

好多开发者在讨论机在机器视觉人工智能领域的时候&#xff0c;纠结到底是用Python还是C&#xff0c;实际上&#xff0c;Python 和 C 都有广泛的应用&#xff0c;选择 Python而不是 C 可能有以下一些原因&#xff1a; 语言易学性和开发效率 语法简洁&#xff1a; Python 语法简…
阅读更多...
解决 Xcode 编译错误：libarclite 缺失与 iOS 部署目标问题

解决 Xcode 编译错误：libarclite 缺失与 iOS 部署目标问题

解决 Xcode 编译错误&#xff1a;libarclite 缺失与 iOS 部署目标问题 引言 作为一名资深的 iOS 开发者&#xff0c;我最近在使用最新版本的 Xcode 编译一个 Flutter 项目时遇到了一个棘手的问题。错误信息提示 SDK 中缺少 ‘libarclite’&#xff0c;并建议增加最小部署目标…
阅读更多...
基于协同过滤的景区旅游可视化与景区推荐系统（自动爬虫，地点可换）

基于协同过滤的景区旅游可视化与景区推荐系统（自动爬虫，地点可换）

文章目录 有需要本项目的代码或文档以及全部资源&#xff0c;或者部署调试可以私信博主项目介绍过程展示项目移植每文一语 有需要本项目的代码或文档以及全部资源&#xff0c;或者部署调试可以私信博主 项目介绍 本项目是一个综合性的旅游景区数据管理与分析推荐系统,集成了用…
阅读更多...
《深度学习》OpenCV 风格迁移、DNN模块 案例解析及实现

《深度学习》OpenCV 风格迁移、DNN模块 案例解析及实现

目录 一、风格迁移 1、什么是风格迁移 2、步骤 1&#xff09;训练 2&#xff09;迁移 二、DNN模块 1、什么是DNN模块 2、DNN模块特点 1&#xff09;轻量 2&#xff09;外部依赖性低 3&#xff09;方便 4&#xff09;集成 5&#xff09;通用性 3、流程图 4、图像…
阅读更多...
postman变量，断言，参数化

postman变量，断言，参数化

环境变量 1.创建环境变量 正式环境是错误的&#xff0c;方便验证环境变化 2.在请求中添加变量 3.运行前选择环境变量 全局变量 能够在任何接口访问的变量 console中打印日志 console.log(responseBody);//将数据解析为json格式 var data JSON.parse(responseBody); conso…
阅读更多...
C语言常见知识点

C语言常见知识点

目录 一、单位 二、变量 三、常量 四、转义字符 五、操作符 六、指针 七、数组 一、单位 在刚接触编程时&#xff0c;肯定会了解到计算机的存储单位&#xff0c;它们由小到大分别为bit&#xff08;位&#xff09;、Byte&#xff08;字节&#xff09;、KB&#xff08;千字…
阅读更多...
linux上的smb共享文件夹

linux上的smb共享文件夹

需求描述 公司的打印机使用扫描功能的时候&#xff0c;需要发送大量文件。然鹅公司的电脑都是加入了AzureAD的&#xff0c;不能在公司电脑上简单设置共享。好在公司有很多阿里云上的服务器&#xff0c;Linux和Windows的都有&#xff0c;所以就来尝试用阿里云的服务器来进行smb…
阅读更多...
最新文章

Copyright @ 2022~2023