【Web技术】1051- 这还是我最熟悉的package.json吗？

╰+攻爆jí腚メ 2022-09-05 04:14 99阅读 0赞

![a0129490a7aa20a5bc195e3374b9c6ac.png][]

原创@前端司南

# 前言 #

在上一篇npm init @vitejs/app的背后，仅是npm CLI的冰山一角\[1\]中，有提到我复习**npm**主要是从两个大方向来入手，所以这篇继续来讲讲`package.json`这部分知识，经过这轮复习，也发现了自己的很多不足，之前把常用的命令和配置玩熟了，却没关心**npm**已经有了更多新的玩法，而这些玩法却实实在在地在解决别人的问题。

npm 的配置还是挺多的，具体可以参考package.json官方文档\[2\]。通读了文档之后，我略过了一些基础的配置项，总结了一些我认为比较有用的配置项。

![fbdf505ac453254f43e8fc6d0f69216a.png][]

# 常用配置项 #

## files ##

`files`定义了哪些文件应该被包括在 npm install 后的 node\_modules中。

当然，有些文件是自动暴露出来的，不管你是不是配置了`files`，比如：

*  package.json
 *  README / CHANGELOG / LICENSE
 *  ...

很多库都定义了 files，避免一些不必要的文件暴露到 node\_modules 中。

vite 中是这样配置的：

{
      "files": [ "bin", "dist", "client.d.ts" ]
    }

我之前就不知道这个配置，导致我发布的一个 npm 组件 vue-awesome-progress\[3\] 就暴露了源码部分，虽然这也没啥影响，本来就是开源的。但是这也增加了别人的资源下载量，也是一种浪费。所以，专业点的搞法还是加上`files`配置吧。

## bin ##

bin 列出了可执行文件，表示你这个包要对外提供哪些脚本。

在这个包被 install 安装时，如果是全局安装 -g，bin 列出的可执行文件会被添加到 PATH 变量（全局可执行）；如果是局部安装，则会进入到 node\_modules/.bin/ 目录下。

bin 在一些 CLI 工具中用得很频繁，比如 Vue CLI。

在开发 npm 包时，要求发布的可执行脚本要以`#!/usr/bin/env node`开头，这是为什么呢？

我查了一下，原来是为了用于指明该脚本文件要使用 node 来执行。

## main, browser, module ##

这三个配置对我们的影响还是挺大的。

*  `main`字段决定了别人`require('xxx')`时，引用的是哪个模块对象。在不设置`main`字段时，默认值是`index.js`。
 *  如果你开发的包是用于浏览器端的，那么用`browser`指定入口文件是最佳的选择。
 *  `module`则代表你开发的包支持`ESM`，并指定了一个`ESM`入口。

具体这三个字段怎么用，还是挺有学问的，这里推荐一篇文章package.json中你还不清楚的browser，module，main 字段优先级\[4\]，讲得挺细。

**长图警告！**

![ab9a5fc3e49b94352d4388c7787354fa.png][]

## scripts ##

`scripts`也基本上每天都用了，但是它的钩子脚本你用过吗？如果没有用过，可以试试，在组织脚本流程时非常好用！

*  **pre**：在一个script执行前执行，比如prebuild，可以在打包前做一些准备工作。
 *  **post**：在一个script执行后执行，比如postbuild，可以在打包后做一些收尾工作。

## config ##

通过`config`配置的参数`xxx`，可以在脚本中通过`npm_package_config_xxx` 的形式引用，比如`port`。

{
      "config": {
        "port": "8080"
      }
    }

## 依赖相关 ##

### dependencies ###

`dependencies`可以理解为生产依赖，通过`npm install --save`安装的依赖包都会进入到`dependencies`中。

### devDependencies ###

`devDependencies`可以理解为开发环境依赖，通常是一些工具类的包，比如 webpack, babel等。通过`npm install --save-dev`安装的依赖包都会进入到`devDependencies`中。

但是，在结合一些构建工具使用时，我们往往会有困惑。比如我安装了一个包到`devDependencies`中，但是不小心在项目中引用了它，最后也被 webpack 打包到构建结果中了。这是怎么回事呢？

建议结合上篇文章npm install这一节\[5\]一起看。

### peerDependencies ###

> 我是**package-a**，你装我，你就必须装我的**peerDependencies**。

让“调包侠”将**package-a的依赖**提升到自己的`node_modules`中，这样可以在“调包侠”和**package-a**都需要同一个依赖（比如vue）时，避免重复安装。这常见于开发组件或者库。

注意，一个 npm 包的开发者如果声明了`peerDependencies`,开发环境下在该包目录`npm install`也不会在`node_modules`中安装这些依赖，所以往往还需要借助`devDependencies`。

举个例子，我开发一个组件，不想发布到 npm 时包含了 vue 的代码，这就需要外部提供 vue ，所以我把 vue 定义在 peerDependencies 也无可厚非。但是，在开发组件时，一般还需要本地开发环境跑一个 demo 试试效果，这时候是依赖 vue 的，所以还需要在 devDependencies 中安装 vue 。我看了下 vue-router 就是这么做的，所以我在开发自己的组件时也学会了这招。

### bundledDependencies ###

`bundledDependencies`跟上面的依赖都不太一样，配置上不是键值对的形式，而是一个数组。

{
      "bundledDependencies": [
        "vue",
        "vue-router"
      ]
    }

在运行`npm pack`时，会将对应依赖打包到`tgz`文件中。用得不多，不知道具体的细节，主要还是直接用`npm install`安装 tgz 包的场景比较少，有个概念就行。

### optionalDependencies ###

`optionalDependencies`用于配置可选的依赖，即使配了这个，代码里也要做好判断（保护），否则运行报错就不好玩了。

try {
      var foo = require('foo')
      var fooVersion = require('foo/package.json').version
    } catch (er) {
      foo = null
    }

# 题外话 #

仔细读过`package.json`文档后，整体上还是解决了我的不少困惑，对我开发 npm 组件也提供了不少帮助。如果您想了解更多细节和实战，不妨打开我这个项目vue-awesome-progress\[3\]看看，希望对您有所帮助！

### 参考 ###

\[1\]

npm init @vitejs/app的背后，仅是npm CLI的冰山一角: https://juejin.cn/post/6950817077670182943

\[2\]

package.json官方文档: https://docs.npmjs.com/cli/v7/configuring-npm/package-json

\[3\]

vue-awesome-progress: https://cumt-robin.github.io/vue-awesome-progress/

\[4\]

package.json中你还不清楚的browser，module，main 字段优先级: https://www.cnblogs.com/qianxiaox/p/14041717.html

\[5\]

上篇文章npm install这一节: https://juejin.cn/post/6950817077670182943\#heading-6

![1f1b8f240f742fa080123316611620be.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 120[\+篇原创系列汇总][Link 1]

![d084e9d6748848c4111841f13fc91296.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 120+ 篇原创文章

[a0129490a7aa20a5bc195e3374b9c6ac.png]: /images/20220829/f05a78311c874673887b8fb63bb73c02.png
[fbdf505ac453254f43e8fc6d0f69216a.png]: /images/20220829/1ab0c9e04ea74f32aafed4231faa45e5.png
[ab9a5fc3e49b94352d4388c7787354fa.png]: /images/20220829/8f487dbaf5104f94a680448f8f5cb087.png
[1f1b8f240f742fa080123316611620be.gif]: /images/20220829/6b37bb08739e445c9e79d9355d23861c.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[d084e9d6748848c4111841f13fc91296.gif]: /images/20220829/789a314d825d4299a3cca4cd42ea2947.png