es6 阮一峰 es6阮一峰官网

Package.json是一个json文件，存在于每个前端项目中，位于项目的根目录下。很多脚手架在搭建项目的时候会自动为我们初始化package.json。

package.json中有很多配置，与项目密切相关。了解它们有助于理解项目，改进开发，规范代码。

今天主要介绍一些常见的配置，我把它们分成了七类:

描述配置

文件配置

脚本配置

从属配置

发布配置

系统配置

第三方配置

1. 描述配置

主要是项目的基本信息，包括名称、版本、描述、仓库、作者等。，还有一些会在npm官网上展示。

名字

项目的名称。如果是第三方包，别人可以通过npm install安装。

"姓名& # 34；: "做出反应& # 34；版本

项目的版本号和开源项目的版本号通常遵循semver语义规范，具体规则如下图所示:

简单介绍一下:

1 代表主版本号 Major，通常在涉及重大功能更新，产生了破坏性变更时会更新此版本号2 代表次版本号 Minor，在引入了新功能，但未产生破坏性变更，依然向下兼容时会更新此版本号3 代表修订号 Patch，在修复了一些问题，也未产生破坏性变更时会更新此版本号

除了X.Y.Z等标准版本号，还有预发布和元数据来描述项目的测试版本。有关semver规范的更多信息，请参考https://juejin.cn/post/7122240572491825160.

回到package.json的版本字段，name+version可以一起形成一个完全唯一的项目标识符，所以它们是最重要的两个字段。

"版本& # 34；: "18.2.0"仓库

项目的仓库地址和版本控制信息。

"知识库& # 34；: { "类型& # 34；: "git & # 34, "网址& # 34；: "https://github.com/facebook/react.git"，& # 34；目录& # 34；: "包装/反应& # 34；}描述

项目的描述会在npm官网展示，让其他人快速了解项目。

"描述& # 34；: "React是一个用于构建用户界面的JaScript库。"关键词

一组项目的技术关键词，如蚂蚁设计组件库关键词如下:

"关键词& # 34；: [ "蚂蚁& # 34；, "组件& # 34；, "组件& # 34；, "设计& # 34；, "框架& # 34；, "前端& # 34；, "做出反应& # 34；, "反应组件& # 34；, "ui & # 34】，好的关键词可以帮助别人在npm官网更好的检索到这个项目，增加曝光度。

主页

项目主页的链接通常是项目的github链接，项目的官网或者文档的主页。

"主页& # 34；: "https://reactjs.org/"虫子

项目bug反馈地址通常是github问题页面的链接。

"臭虫& # 34；: "https://github.com/vuejs/core/issues"许可证

"许可证& # 34；: "麻省理工& # 34；作者

项目作者。

"作者& # 34；: "李嘉勋& # 34；2.文件配置包括项目包含的文件和入口等信息。

文件

当npm发布时，可以使用文件来指定需要随其发布的内容，以控制npm包的大小并避免安装时间过长。

默认情况下，发布时将包括package.json、许可证、自述文件和主字段中指定的文件。忽略node_modules和lockfile等文件。

在此基础上，我们可以指定更多需要一起发布的内容。它可以是单个文件、整个文件夹或匹配通配符的文件。

"文件& # 34；: [ "filename.js & # 34, "目录/& # 34；, "glob/*。{js，json } & # 34]一般情况下，构建的产品和类型文件会在文件中指定，而src、test等目录下的文件则不需要释放。

类型

节点支持ES模块后，要求ES模块采用。mjs后缀文件名。每当你遇到。mjs文件，你以为是ES模块。如果不想修改文件后缀，可以在package.json文件中将type字段指定为module。

"类型& # 34；: "模块& # 34；这样，所有带有。带有ES模块的节点将解释js后缀。

#使用ES模块规范$ node index.js如果要使用CommonJS模块规范，需要将CommonJS脚本的后缀名改为。cjs，但是最好不要把两个模块规格混在一起，这样会产生异常错误。

主要的

发布项目时，默认会包含package.json、license、README和main字段中指定的文件，因为main字段指定了项目的入口文件，在浏览器和节点环境中都可以使用。

如果没有设置main字段，那么条目文件就是根目录下的index.js。

例如，packageA的主字段被指定为index.js

"main & # 34: "。/index . js & # 34；当我们引入packageA时，我们实际上引入了Node _ Modules/PackageA/index.js。

这是早期只有CommonJS模块规范时唯一指定项目条目的属性。

浏览器

在主字段中指定的条目文件可以在浏览器和节点环境中使用。如果只想在web端使用，不想在服务器端使用，可以通过浏览器字段指定入口。

"浏览器& # 34；: "。/browser/index . js & # 34；组件

同样，项目也可以指定ES模块的入口文件，这是模块字段的功能。

"模块& # 34；: "。/index . mjs & # 34；当一个项目同时定义main、browser和module时，webpack、rollup等构建工具会感知这些字段，并根据环境和不同的模块规范搜索不同的入口文件。

"main & # 34: "。/index . js & # 34；, "浏览器& # 34；: "。/browser/index . js & # 34；,"模块& # 34；: "。/index . mjs & # 34；例如，当webpack构建一个项目时，默认目标是& # 39；web & # 39，即Web构建。它的resolve.mainFeilds字段默认为[& # 39；浏览器& # 39；, '模块& # 39；, 'main & # 39]。

module.exports = { //…解析:{主字段:[& # 39；浏览器& # 39；, '模块& # 39；, 'main & # 39], },};这时，它会跟随浏览器-& gt；模块->；查找条目文件的主命令。

出口

节点支持在14.13中定义package.json中的导出字段，并具有条件导出的功能。

exports字段可以配置对应于不同环境的模块入口文件，当它存在时，它具有最高的优先级。

例如，根据模块规范，使用“要求”和“导入”字段分别定义条目:

"出口& # 34；: { "要求& # 34；: "。/index . js & # 34；, "进口& # 34；: "。/index . mjs & # 34；}}此配置正在使用导入& # 39；xxx & # 39并要求(& # 39；xxx & # 39)会从不同的门户导入文件，导出也支持使用浏览器和节点字段来定义浏览器和节点环境中的门户。

上面的文字实际上相当于:

"出口& # 34；: { "。": { "要求& # 34；: "。/index . js & # 34；, "进口& # 34；: "。/index . mjs & # 34；}}}为什么要添加层次结构，把需求和导入放在& # 34；。"下一步是什么？

因为导出不仅支持配置包的默认导出，还支持配置包的子路径。

比如一些第三方UI包需要导入相应的样式文件才能正常使用。

导入` packageA/dist/css/index.css `;我们可以使用导出来封装文件路径:

"出口& # 34；: { "。/style & # 34；: "。/dist/CSS/index . CSS & # 39；}，用户只需:

导入“packageA/style ”;除了封装导出的文件路径，导出还限制用户访问不在& # 34；出口& # 34；中定义的任何其他路径。

比如发布的dist文件中有一些内部模块dist/internal/module，如果单独引入用户使用，可能会导致主模块不可用。为了限制外部使用，我们不能在导出时定义这些模块的路径，这样如果从外部引入packageA/dist/internal/module模块，就会出错。

结合以上portal文件配置的知识，看看下面vite官网推荐的第三方库portal文件的定义就很好理解了。

工作区

项目的工作区配置用于管理本地根目录下的多个子项目。安装npm时，您可以自动将工作区下的程序包软链接到根目录下的node_modules，而无需手动执行NPM链接操作。

Workspaces字段接收一个数组，该数组可以是文件夹名或通配符。例如:

"工作区& # 34；: [ "工作空间-a & # 34；]表示工作区中还有另一个项目——一个目录，也有自己的package.json。

package . JSON workspace-└──package . JSON通常子项目在packages目录下平铺管理，所以根目录下的工作区通常配置为:

"工作区& # 34；: [ "包/* & # 34；]3.脚本配置脚本

指定项目的一些内置脚本命令，可以通过npm run执行。它通常包含CI命令，如项目开发和建设，如:

"脚本& # 34；: { "构建& # 34；: "网络包& # 34；}我们可以使用命令npm run build/yarn build来执行项目构造。

除了指定基本命令外，还可以配合前置和后置来完成命令的前置和后置操作，例如:

"脚本& # 34；: { "构建& # 34；: "网络包& # 34；, "预构建& # 34；: "xxx & # 34，//在构建执行前挂钩& # 34；后期制作& # 34；: "xxx & # 34//build执行后挂钩npm run build命令执行时，会跟随pre build->；构建->；按照postbuild的顺序执行上述命令。

但是这样的隐式逻辑很可能造成工作流执行的混乱，所以pnpm和yarn2都放弃了这种前/后自动执行的逻辑。参考pnpm问题讨论https://github.com/pnpm/pnpm/issues/2891.

如果需要手动打开，pnpm项目可以设置。npmrcenable-前置后置脚本= true。

enable-pre-post-scripts = true config

Config用于在运行时设置脚本的参数。例如，将端口设置为3001:

"配置& # 34；: { "端口& # 34；: "3001"}在执行脚本时，我们可以通过变量npm_package_config_port来访问3001。

console . log(process . env . NPM _ package _ config _ port)；// 30014.依赖配置项目可能依赖于其他包，您需要在package.json中配置这些依赖信息。

属国

操作依赖，即需要在项目的生产环境中使用的依赖。如react、vue、状态管理库、组件库等。

当使用npm install xxx或npm install xxx – se时，它将自动插入该字段。

"依赖性& # 34；: { "反应& # 34；: "^18.2.0", "react-DOM & # 34；: "^18.2.0"}开发依赖性

开发依赖(Development dependency)，是项目开发环境需要的，但运行时不需要，用于辅助开发，通常包括webpack、vite、eslint等项目工程工具。

当使用npm install xxx -D或npm install xxx – se-dev时，它会自动插入到该字段中。

"devDependencies & # 34: { "网络包& # 34；: "^5.69.0"}对等依赖性

对等依赖(Peer dependency)是一种特殊的依赖，不会自动安装，通常用来表示与另一个包的依赖和兼容关系，以警告用户。

比如我们安装A，A的正常使用依赖于B@2.x版本，那么B@2.x应该列在A的peerDependencies下面，意思是“如果你用我，那么你需要安装B，至少是2.x版本”。

例如，反应组件库Ant Design在package.json中有如下peerDependencies。

"对等依赖& # 34；: { "做出反应& # 34；: "& gt=16.9.0", "react-DOM & # 34；: "& gt=16.9.0"}意味着如果使用Ant Design，你的项目也要安装react和react-dom，版本要16.9.0以上。

可选依赖性

可选依赖，顾名思义就是依赖是可选的，不会阻塞主函数的使用，如果安装或引入失败也无妨。如果此类依赖项的安装失败，则npm的整个安装过程也会成功。

例如，我们使用包颜色对console.log打印的信息进行着色，以增强和区分提示，但这不是必需的，因此我们可以将它添加到optionalDependencies中，并处理在运行时引入失败的逻辑。

当使用npm install xxx -O或npm install xxx – se-optional时，依赖关系将自动插入到该字段中。

"可选依赖性& # 34；: { "颜色& # 34；: "^1.4.0"}对等依赖关系

还可以使用peerDependencieeta将对等依赖关系指定为可选的。

"对等依赖& # 34；: { "颜色& # 34；: "^1.4.0"},"peerDependencieeta & # 34: { "颜色& # 34；: { "可选& # 34；:true } }依赖性

包装依赖性。它的值是一个数组，当包发布时，bundleDependencies中的依赖项将被打包在一起。

例如，指定react和react-dom作为打包依赖项:

"依赖性& # 34；: [ "反应& # 34；, "react-DOM & # 34；]在npm pack生成的tgz压缩包中，会出现node_modules，并包含react和react-dom。

需要注意的是，这个字段数组中的值必须是dependencies和devDependencies中声明的依赖项。

普通的依赖项通常是从npm registry安装的，但是当你想使用一个不在npm registry中的包或者修改过的第三方包时，打包的依赖项会比普通的依赖项更好。

无视

覆盖可以重写项目的依赖项和依赖项树下的依赖项的版本号，以替换包。

例如，由于某些原因，依赖项A需要被替换。我们可以使用覆盖来修改foo的版本号:

"覆盖& # 34；: { "福& # 34；: "1 . 1 . 0-补丁& # 34；}当然，这样会改变整个依赖树中的foo，我们可以只在A下重写foo的版本号:

"覆盖& # 34；: { "一& # 34；: { "福& # 34；: "1 . 1 . 0-补丁& # 34；，} }覆盖支持任意深度的嵌套。

如果要在yarn中复制依赖版本号，需要使用resolution字段，而在pnpm中，需要使用pnpm.overrides字段来复制版本号。

5. 发布配置

主要与项目发布配置相关。

私人的

如果它是私有项目，并且您不想将其发布到公共npm仓库，则可以将private设置为true。

"private & # 34:truepublishConfig

顾名思义，publishConfig是发布npm包时使用的配置。

例如，您可以指定PublishConfig。注册表当你在安装依赖项的时候指定注册表作为淘宝图片来源，但是发布的时候又想在公网发布。

"publishConfig & # 34: { "注册表& # 34；: "https://registry.npmjs.org/"。系统配置和与项目相关的系统配置，例如节点版本或操作系统兼容性。这些要求只会起到警示作用，即使用户的环境不符合要求，也不会影响依赖包的安装。

发动机

由于兼容性问题，有些项目对节点或程序包管理器有特定的版本号要求，例如:

"引擎& # 34；: { "节点& # 34；: "& gt= 14 & lt16", "pnpm & # 34: "& gt7"}节点版本要求大于等于14小于16，pnpm版本号需要大于7。

操作系统（Operating System）

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

"os & # 34: ["达尔文& # 34；, "linux & # 34]处理器

指定项目只能在特定的CPU体系结构上运行。

"cpu & # 34: ["x64 & # 34, "ia32 & # 34]7.一些第三方库或者第三方配置的应用会依赖这些字段进行一些内部处理，使用时需要安装相应的第三方库。

类型或错别字

指定TypeScript的类型定义的条目文件。

"类型& # 34；: "。/index . d . ts & # 34；，unpkg

您可以让npm上的所有文件打开CDN服务。

比如vue package.json的unpkg定义为dist/vue.global.js

"unpkg & # 34: "dist/vue . global . js & # 34；当我们想通过CDN用链接介绍vue的时候。

访问https://unpkg.com/vue将被重定向到https://unpkg.com/vue@3.2.37/dist/vue.global.js,，在那里3.2.27是Vue的最新版本。

jsdelivr

与unpkg类似，vue的配置如下。

"jsdelivr & # 34: "dist/vue . global . js & # 34；事实上，当您访问https://cdn.jsdelivr.net/npm/vue,时，您会在jsdelivr字段中配置文件地址。

浏览器列表

设置项目的浏览器兼容性。babel和autoprefixer等工具将使用这种配置来转换代码。当然，您也可以使用。browserslistrc单个文件配置。

"浏览列表& # 34；: [ "& gt1%", "最近两个版本& # 34；[商务英语副作用

显示设置部分模块有副作用，用于webpack的摇树优化。

比如Ant设计组件库的css文件是作为一个整体引入到项目中的。

进口& # 39；antd/dist/antd . CSS & # 39；；//或者& # 39；antd/dist/antd . less & # 39；如果Ant Design的package.json中没有设置sideEffects，webapck会认为这个代码只是在构建包时引入但没有使用，可以通过摇树的方式移除，最终导致产品缺乏风格。

所以Ant Design在package.json中设置了以下sideEffects，告知webpack这些文件有副作用，引入后不能删除。

"副作用& # 34；: [ "dist/* & # 34；, "es/* */style/* & # 34；, "lib/* */style/* & # 34；, "*.少& # 34；]皮棉-分期付款

Lint-staged是一个对git的临时存储区中的文件进行操作的工具，比如在代码提交前执行Lint检查、类型检查、映像优化等操作。

"皮棉阶段& # 34；: { "src/**/*。{js，jsx，ts，tsx } & # 34: [ "eslint-fix & # 34；, "git add-A & # 34；]}lint-staged通常与像husky这样的git-hooks工具一起使用。Git-hooks用于定义一个钩子。这些钩子方法将在git工作流中被触发，比如pre-commit和commit-msg。lint-staged可以放入这些钩子方法中。

8. 结语

今天我们简单了解了package.json的常用配置，有了这些知识，我敢说你可以毫无压力的看完大部分项目的package.json。

但是package.json里面的内容远不止这些，比如semver规范，入口文件，项目依赖等等。了解他们只是第一步。

9. 参考

https://docs.npmjs.com/cli/v8/configuring-npm/package-json

王浩宇的《https://zhuanlan.zhihu.com/p/548202395》

Https://juejin.cn/post/7095903278084390948靠钓春哥。

Https://juejin.cn/post/7122240572491825160靠钓春哥。

冯清扬《Https://zhuanlan.zhihu.com/p/29855253》

库兹的《https://juejin.cn/post/7023539063424548872》

森尤的《https://segmentfault.com/a/1190000016365409》

阳光https://github.com/SunshowerC/blog/issues/8 c