首页 > 其他分享 >前端package.json文件

前端package.json文件

时间:2024-04-07 16:22:48浏览次数:28  
标签:npm 文件 package index 前端 项目 指定 js json

package.json 文件是 Node.js 项目的配置文件,用于描述项目的元数据和依赖关系。它是一个 JSON 格式的文件,位于项目根目录下。在这个文件中,你可以定义项目的名称、版本号、作者、许可证等项目信息,并且可以列出项目所需的依赖包和脚本。

在创建新的 Node.js 项目时,通常会通过运行 npm init 命令来生成 package.json 文件。你可以手动编辑该文件,或者使用 npm install 命令来安装新的依赖包,package.json 文件会自动更新。

package.json对于大部分前端开发者来说,知道dependencies与devDependencies就够了。但对于库开发者或有更高级需求的开发者来说,了解 package.json 的其他字段是非常有必要的。
本文介绍的字段分为官方字段与非官方字段。非官方字段是被主流打包工具(webpack,Rollup)所支持, 旨在提供更高级的配置和功能,以满足特定的构建需求,可能不具备通用性。

一、必须属性

1.  name
定义项目的名称,不能以"."和"_"开头,不能包含大写字母
2. version
定义项目的版本号,格式为:大版本号.次版本号.修订号

二、描述信息

1.  description
项目描述
2. keywords
项目关键词
3. author
项目作者
"author": "name (http://barnyrubble.tumblr.com/)"
4. contributors
项目贡献者
 "contributors": [     "name <[email protected]> (http://barnyrubble.tumblr.com/)"   ]
5. homepage
项目主页地址
6. repository
项目代码仓库地址
7. bugs
项目提交问题的地址
 //提交问题的地址和反馈的邮箱,url通常是Github中的issues页面 "bugs": {    "url" : "https://github.com/facebook/react/issues",    "email" : "[email protected]" }
8. funding
指定项目的资金支持方式和链接
"funding": {     "type": "patreon",     "url": "https://www.patreon.com/my-module"   }

三、依赖配置

1. dependencies
生产环境的依赖包
如果不使用脱字符(^),安装的版本号固定;如果使用,则能安装当前大版本的最新版本,在package-lock.json中可查看当前实际安装的版本。
2. devDependencies
开发环境的依赖包,例如webpack、vite、babel、ESLint等。
3. peerDependencies
对等依赖的作用:
减小打包体积:例如使用react开发的组件库,安装react是必不可少的,而使用组件库的开发者,本地项目肯定安装了react,因此开发的组件库中不必把react打包进去(期望项目的使用者来提供这些模块的实现)。
版本一致性:使用你的组件库的开发者需要确保他们项目中安装了与你声明的对等依赖版本兼容的包,以确保组件库正常运行。
示例:声明要使用组件库,需在项目中安装大于17.0.1版本的react
 "peerDependencies": {     "react": ">17.0.1"   }
4. peerDependenciesMeta
将对等依赖标记为可选,如果用户没有安装对等依赖,npm不会发出警告
 "peerDependenciesMeta": {     "react": {       "optional": true //标记为可选     }   }
5. bundledDependencies
声明捆绑依赖项(使用情景较少)
6. optionalDependencies
声明可选依赖项(使用情景较少)
7. engines
声明对npm或node的版本要求
 "engines": {     "node": ">=8.10.3 <12.13.0",     "npm": ">=6.9.0"   }
engines只是起一个说明的作用,即使用户安装的版本不符合要求,也不影响依赖包的安装。
8. workspaces
单个代码库中统一管理多个包(monorepo),在workspaces声明目录下的package会软链到根目录的node_modules中。
1. 初始化项目
npm init -y
2. 声明本项目是workspaces模式
 "private":"true",   "workspaces": [     "packages/*"    ],
表示所有子包都在packages文件夹下
3. 创建子包p1
npm init -w packages/p1 -y
在node_modules/.package-lock.json中可以看到 "link": true 链接符号信息
4. 新建packages/p1/index.js
module.exports = "p1包";
5. 创建子包p2
npm init -w packages/p2 -y
6. 将子包p1添加到p2中
npm i p1 -w p2
安装,卸载等命令都是一样的,只是多了"--workspace="参数(简写-w),用来指定在哪个包中执行命令
7. 子包p2使用p1
const p1 = require("p1");  console.log("使用", p1);  module.exports = "p2包";
workspaces功能与lerna类似,如果只需简单地管理多个包,workspaces足够了。lerna具有版本管理,发包提示,简化多包项目发布流程等更多功能。

四、脚本配置

1. scripts
脚本入口
2. config
用于定义项目的配置项,例如设置环境变量
(1). config 配置
 "config": {     "baseUrl": "https://example.com"   }
(2). scripts 配置
 "scripts": {     "start": "node index.js",   },
3. 新建index.js
//使用process.env.npm_package_config_XXX取值 console.log(process.env.npm_package_config_baseUrl)
运行 npm run start,终端打印出 example.com

五、文件&目录

1. module(非官方字段)
指定 ES 模块入口文件
示例:当其他开发者在他们的项目中导入你的包时,会加载并执行包中的dist/index.esm.js
"main": "dist/index.esm.js"
2. main
指定 CommonJS 模块或 ES 模块入口文件。如果不指定该字段,默认是根目录下的index.js
提示:从 Node.js 12.20.0 版本开始,"main" 字段也可以指定 ES 模块的入口文件
3. browser
指定浏览器使用的入口文件,例如umd模块。
4. types(非官方字段)
指定 TypeScript 类型声明文件(.d.ts 文件)的路径
5. exports(非官方字段)
当打包工具支持exports字段时(webpack、Rollup 等),以上main,browser,module,types四个字段都被忽略
"." 表示默认导出
"import": 指定了 ES module (ESM) 规范下的导出文件路径
"require": 指定了 CommonJS 规范下的导出文件路径
"browser": 指定了用于浏览器环境的导出文件路径
"types": 指定了类型声明文件的路径
 "exports": {     ".": {       "import": "./dist/index.esm.js",       "require": "./dist/index.cjs.js",       "browser": "./dist/index.umd.js",       "types": "./dist/index.d.ts"     }   }
导出其他文件,例如除了导出默认路径,导出源文件
 "exports":{     ...   "./main" : "./src/main.js" },
其他项目中使用
import main from 'packageName'; // . 方式定义的 import main from 'packageName/main'; // ./main 方式定义的
6. type(非官方字段)
指定模块系统的使用方式,"commonjs","module","umd","json"
示例:指定模块系统为ES module模式,使用CommonJS文件时,需显式的定义为 .cjs 文件扩展名,来明确指定这些文件为 CommonJS 模块
"type":"module"
7. files
指定哪些包被推送到npm服务器中
示例:只推送index.js和dist包到npm服务器
"files": [     "index.js",     "dist"   ],
可以在项目根目录新建一个.npmignore文件,说明不需要提交到npm服务器的文件,类似.gitignore。写在这个文件中的文件即便被写在files属性里也会被排除在外
8. bin
定义在全局安装时可执行的命令(使用情景较少)
9. man
Linux 中的帮助指令(使用情景较少)
10. directories
定义项目目录结构的字段(使用情景较少)

六、发布配置

1. private
防止私有包发布到npm服务器,要发布到npm上设为false
2. preferGlobal(非官方字段)
当设置 "preferGlobal" 字段为 true 时,它表示你的包更适合以全局方式安装,而不是作为项目的依赖项进行本地安装。
这个字段的设置是为了向用户传达关于你的包的最佳使用方式的建议。它并不会直接影响包的安装方式或包管理器的行为。
3. publishConfig
在发布包时指定特定的配置
示例:指定包发布的注册表 URL,指定所有用户都可以访问(私有的会收费)
 "publishConfig": {     "registry": "https://registry.npmjs.org/",     "access": "public"   }
4. os
指定你的包适用的操作系统
示例:包只适用于darwin(macOS)和 linux
"os": ["darwin", "linux"]
示例:禁用win32
"os" ["!win32"] //禁用的操作系统
5. cpu
该配置和OS配置类似,用CPU可以更准确的限制用户的安装环境
6. license
指定软件的开源协议:
ISC:在所有副本中保留版权声明和许可证声明,使用者就可以拿你的代码做任何想做的事情,你也无需承担任何责任
MIT:在所有副本或主要部分中保留版权声明和许可证声明,使用者就可以拿你的代码做任何想做的事情,你也无需承担任何责任
开源协议查询地址:opensource.org/licenses/
七、第三方配置(非官方字段)
1. eslintConfig
eslint的配置,更推荐新建 .eslintrc 进行配置
使用参考:新建 .eslintrc
2. babel
babel的配置,更推荐新建 .babelrc 进行配置
3. unpkg
unpkg 是一个基于 CDN 的前端包托管服务,用于在浏览器中直接引用和加载 npm 上发布的包。
无需下载,直接通过 <script> 标签引用
js复制代码<script src="https://unpkg.com/package-name@version"></script>
4. lint-staged
lint-staged是一个在Git暂存文件上运行linters的工具,通常配合gitHooks一起使用。
使用参考:配置 husky、lint-staged、@commitlint/cli
5. browserslist
告知支持哪些浏览器及版本,Autoprefixer常用到它
  "browserslist": [     "defaults",     "not ie < 8",     "last 2 versions",     "> 1%",     "iOS 7",     "last 3 iOS versions"   ]
6. sideEffects
指示包是否具有副作用,协助Webpack,Rollup等进行tree shaking
多数情况下可以直接设置为false,这样打包工具就会自动删除未被import的代码
但是有些情况例外
有一些特定的模块文件,它们执行一些副作用操作,如注册全局事件监听器、修改全局状态等。
告诉构建工具不要将样式文件排除在无用代码消除的优化范围之外
"sideEffects": ["./path/to/module.js", "*.css"]

标签:npm,文件,package,index,前端,项目,指定,js,json
From: https://www.cnblogs.com/xupeixuan/p/18119314

相关文章

  • vue websocket电脑端前端集成
    后端数据用websocket推送数据,前端在大屏左上角模块页面接收,用bus发送到其他模块(总共6个模块页面,从左上模块页面发送到其他5个模块页面)页面,数据用于大屏上显示,废话不多说,直接上代码。eventBus.js文件,放到根目录src->assets->js文件夹下,eventBus.js文件内容如下:importVuefr......
  • 解释一下package.json中的 "license": "ISC"是什么意思?
    在package.json文件中,"license":"ISC"表示该项目采用了ISC(InternetSystemsConsortium)许可协议。ISC许可协议是一种简明、宽松的开源软件许可证,它赋予了用户以下权利:自由使用:允许个人和组织在没有任何费用的情况下使用该软件,无论用于商业还是非商业目的。复制和分发:用户......
  • 前端【VUE】02-vue指令【v-html 、v-show、 v-if 、v-else、v-on、v-bind、v-for、v-m
    Vue指令①v-html1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<metahttp-equiv="X-UA-Compatible"content="IE=edge">6<metaname="view......
  • 前端的图表绘制框架Konva-基本介绍
    关于Konva及TS的基础这个Konva是一个HTML5的2D绘图库,应用它可以画出各种各样的二维图形来的。Konva.js-JavaScript2dcanvaslibrary MITLicense这个是用它创建的一些网站或者在线工具,还是挺有意思的。应用它的程序自然是多得多,但是我最近也是因缘际会,用到它了。不过像......
  • 实习笔记 之 前端技巧
    下拉选项滚动错位问题描述:当使用了  a-modal  或其他带有滚动条的组件时,使用  a-select  组件并打开下拉框时拖动滚动条,就会导致错位的问题产生。解决方法:大多数情况下,在  a-select  上添加一个  getPopupContainer  属性,值为 node=>node.parentNode  ......
  • 通过输出解析器输出 json 格式数据
    fromlangchain.output_parsersimportResponseSchema,StructuredOutputParserfromlangchain_community.llms.ollamaimportOllamafromlangchain_core.promptsimportPromptTemplatellm=Ollama(model="qwen:7b")#你希望你的回复结构模板response_schems=[......
  • Golang动态高效JSON解析技巧
    Golang动态高效JSON解析技巧原创 俞凡DeepNoMind DeepNoMind 2024-04-0614:57 上海 听全文JSON如今广泛用于配置和通信协议,但由于其定义的灵活性,很容易传递错误数据。本文介绍了如何使用mapstructure工具实现动态灵活的JSON数据解析,在牺牲一定性能的前提下,有效提......
  • C++多线程:async、future、packaged_task、promise、shared_future的学习与使用(九)
    1、异步任务线程异步线程的概念:异步:就是非同步,同步就是必须一个一个的执行,异步可以两个事情一起干异步线程:异步线程就相当于把非关联的两件事分开找两个线程去执行,而分开的那个就是异步线程举例:例如登录信息,用户登录完毕主线程肯定是需要去及时响应用户的请求的,而系统设......
  • 前端全栈echarts实时制作。node.js写后端api接口。
    首先先介绍一下我这个实时可视化的流程:先写后端→写html网页结构→echarts画图→获取api接口数据→做实时可视化。总体来说就是要做一个实时可视化。不说怎么多了我直接开始操作,这次可能不会一下全部写完,但后面会接着继续完善此博客呢。一:node.js写api接口非常的简单,直接一......
  • 前端使用 Konva 实现可视化设计器(2)
    作为继续创作的动力,继续求githubStar能超过50个(目前惨淡的0个),望多多支持。源码示例地址在上一章,实现了“无限画布”、“画布移动”、“网格背景”、“比例尺”、“定位缩放”,并简单叙述了它们实现的基本思路。关于位置和距离从源码里可以发现,多处依赖了Konva.Stag......