package.json配置指南

前言

package.json 是一个用于描述和配置项目的重要文件,其中包含了许多字段和选项,可以影响项目的构建、依赖管理、脚本执行等方面。了解这些字段可以帮助开发者更好地理解和控制项目的行为。
package.json对于大部分前端开发者来说,知道dependencies与devDependencies就够了。但对于库开发者或有更高级需求的开发者来说,了解 package.json 的其他字段是非常有必要的。
本文介绍的字段分为官方字段与非官方字段。非官方字段是被主流打包工具(webpack,Rollup)所支持, 旨在提供更高级的配置和功能,以满足特定的构建需求,可能不具备通用性。
目前版本:v7.24.2

一、必须属性

1. name

定义项目的名称,不能以'.'和'_'开头,不能包含大写字母

2. version

定义项目的版本号,格式为:大版本号.次版本号.修订号

二、描述信息

1. description

项目描述

2. keywords

项目关键词

3. author

项目作者

 'author': 'name (http://barnyrubble.tumblr.com/)'

4. contributors

项目贡献者

'contributors': [
    'name <b@rubble.com> (http://barnyrubble.tumblr.com/)'
  ]

5. homepage

项目主页地址

6. repository

项目代码仓库地址

7. bugs

项目提交问题的地址
//提交问题的地址和反馈的邮箱,url通常是Github中的issues页面

'bugs': { 
  'url' : 'https://github.com/facebook/react/issues', 
  'email' : 'xxxxx@xx.com'
}

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> 标签引用

<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']

七、其他用法

模块引用其他模块

"node-sass": "npm:dart-sass@^1.25.0",

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容