乐从狮山网站建设,济南市建设监理有限公司网站,网站服务器租用恒创,沈阳网站如何制作前言
package.json 是一个用于描述和配置项目的重要文件#xff0c;其中包含了许多字段和选项#xff0c;可以影响项目的构建、依赖管理、脚本执行等方面。了解这些字段可以帮助开发者更好地理解和控制项目的行为。
package.json对于大部分前端开发者来说#xff0c;知道d…前言
package.json 是一个用于描述和配置项目的重要文件其中包含了许多字段和选项可以影响项目的构建、依赖管理、脚本执行等方面。了解这些字段可以帮助开发者更好地理解和控制项目的行为。
package.json对于大部分前端开发者来说知道dependencies与devDependencies就够了。但对于库开发者或有更高级需求的开发者来说了解 package.json 的其他字段是非常有必要的。
本文介绍的字段分为官方字段与非官方字段。非官方字段是被主流打包工具webpackRollup所支持 旨在提供更高级的配置和功能以满足特定的构建需求可能不具备通用性。
目前版本v7.24.2
一、必须属性
1. name
定义项目的名称不能以.和_开头不能包含大写字母
2. version
定义项目的版本号格式为大版本号.次版本号.修订号
二、描述信息
1. description
项目描述
2. keywords
项目关键词
3. author
项目作者 js
复制代码
author: name (http://barnyrubble.tumblr.com/)
4. contributors
项目贡献者 js
复制代码
contributors: [ name brubble.com (http://barnyrubble.tumblr.com/) ]
5. homepage
项目主页地址
6. repository
项目代码仓库地址
7. bugs
项目提交问题的地址 js
复制代码
//提交问题的地址和反馈的邮箱,url通常是Github中的issues页面 bugs: { url : https://github.com/facebook/react/issues, email : xxxxxxx.com }
8. funding
指定项目的资金支持方式和链接 js
复制代码
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 js
复制代码
peerDependencies: { react: 17.0.1 }
4. peerDependenciesMeta
将对等依赖标记为可选如果用户没有安装对等依赖npm不会发出警告 js
复制代码
peerDependenciesMeta: { react: { optional: true //标记为可选 } }
5. bundledDependencies
声明捆绑依赖项使用情景较少
6. optionalDependencies
声明可选依赖项使用情景较少
7. engines
声明对npm或node的版本要求 js
复制代码
engines: { node: 8.10.3 12.13.0, npm: 6.9.0 }
engines只是起一个说明的作用即使用户安装的版本不符合要求也不影响依赖包的安装。
8. workspaces
单个代码库中统一管理多个包monorepo在workspaces声明目录下的package会软链到根目录的node_modules中。
1. 初始化项目 js
复制代码
npm init -y
2. 声明本项目是workspaces模式 js
复制代码
private:true, workspaces: [ packages/* ],
表示所有子包都在packages文件夹下
3. 创建子包p1 js
复制代码
npm init -w packages/p1 -y
在node_modules/.package-lock.json中可以看到 link: true 链接符号信息
4. 新建packages/p1/index.js js
复制代码
module.exports p1包;
5. 创建子包p2 js
复制代码
npm init -w packages/p2 -y
6. 将子包p1添加到p2中 js
复制代码
npm i p1 -w p2
安装卸载等命令都是一样的只是多了--workspace参数简写-w用来指定在哪个包中执行命令
7. 子包p2使用p1 js
复制代码
const p1 require(p1); console.log(使用, p1); module.exports p2包;
workspaces功能与lerna类似如果只需简单地管理多个包workspaces足够了。lerna具有版本管理发包提示简化多包项目发布流程等更多功能。
四、脚本配置
1. scripts
脚本入口
2. config
用于定义项目的配置项例如设置环境变量
1. config 配置 js
复制代码
config: { baseUrl: https://example.com }
2. scripts 配置 js
复制代码
scripts: { start: node index.js, },
3. 新建index.js 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 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 等以上mainbrowsermoduletypes四个字段都被忽略
. 表示默认导出
import: 指定了 ES module (ESM) 规范下的导出文件路径
require: 指定了 CommonJS 规范下的导出文件路径
browser: 指定了用于浏览器环境的导出文件路径
types: 指定了类型声明文件的路径 js
复制代码
exports: { .: { import: ./dist/index.esm.js, require: ./dist/index.cjs.js, browser: ./dist/index.umd.js, types: ./dist/index.d.ts } }
导出其他文件例如除了导出默认路径导出源文件 js
复制代码
exports:{ ... ./main : ./src/main.js },
其他项目中使用 js
复制代码
import main from packageName; // . 方式定义的 import main from packageName/main; // ./main 方式定义的
6. type非官方字段
指定模块系统的使用方式commonjsmoduleumdjson
示例指定模块系统为ES module模式使用CommonJS文件时需显式的定义为 .cjs 文件扩展名来明确指定这些文件为 CommonJS 模块 js
复制代码
type:module
7. files
指定哪些包被推送到npm服务器中
示例只推送index.js和dist包到npm服务器 js
复制代码
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指定所有用户都可以访问私有的会收费 js
复制代码
publishConfig: { registry: https://registry.npmjs.org/, access: public }
4. os
指定你的包适用的操作系统
示例包只适用于darwinmacOS和 linux js
复制代码
os: [darwin, linux]
示例禁用win32 js
复制代码
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 srchttps://unpkg.com/package-nameversion/script
4. lint-staged
lint-staged是一个在Git暂存文件上运行linters的工具通常配合gitHooks一起使用。
使用参考配置 husky、lint-staged、commitlint/cli
5. browserslist
告知支持哪些浏览器及版本Autoprefixer常用到它 js
复制代码
browserslist: [ defaults, not ie 8, last 2 versions, 1%, iOS 7, last 3 iOS versions ]
6. sideEffects
指示包是否具有副作用协助WebpackRollup等进行tree shaking
多数情况下可以直接设置为false这样打包工具就会自动删除未被import的代码
但是有些情况例外 有一些特定的模块文件它们执行一些副作用操作如注册全局事件监听器、修改全局状态等。 告诉构建工具不要将样式文件排除在无用代码消除的优化范围之外 js
复制代码
sideEffects: [./path/to/module.js, *.css]
