你可能不知道的package.json
大家好,我是若川。最近组织了源码共度活动:1个月,200+人,一起读了4周源码,参与的小伙伴都表示收获很大。如果感兴趣可以点击链接扫码加我微信 ruochuan12。今天推荐一篇相对简单的文章。
前言
在上一篇npm init @vitejs/app的背后,仅是npm CLI的冰山一角[1]中,有提到我复习npm主要是从两个大方向来入手,所以这篇继续来讲讲package.json
这部分知识,经过这轮复习,也发现了自己的很多不足,之前把常用的命令和配置玩熟了,却没关心npm已经有了更多新的玩法,而这些玩法却实实在在地在解决别人的问题。
npm 的配置还是挺多的,具体可以参考package.json官方文档[2]。通读了文档之后,我略过了一些基础的配置项,总结了一些我认为比较有用的配置项。
常用配置项
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],讲得挺细。
长图警告!
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
最近组建了一个江西人的前端交流群,如果你是江西人可以加我微信 ruochuan12 私信 江西 拉你进群。
推荐阅读
1个月,200+人,一起读了4周源码
我读源码的经历
老姚浅谈:怎么学JavaScript?
我在阿里招前端,该怎么帮你(可进面试群)
················· 若川简介 ·················
你好,我是若川,毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》多篇,在知乎、掘金收获超百万阅读。
从2014年起,每年都会写一篇年度总结,已经写了7篇,点击查看年度总结。
同时,活跃在知乎@若川,掘金@若川。致力于分享前端开发经验,愿景:帮助5年内前端人走向前列。
识别上方二维码加我微信、拉你进源码共读群
今日话题
略。欢迎分享、收藏、点赞、在看我的公众号文章~
你可能不知道的package.json相关推荐
- 前端开发者需要知道的 package.json
在一个 JavaScript 项目中,package.json 是一个必须的文件,它的作用是管理项目中使用到的外部依赖包,同时它也是 NPM 命令的入口文件. package.json包含描述一个特定 ...
- 你可能不知道的5种 CSS 和 JS 的交互方式
翻译人员: 铁锚 翻译日期: 2014年01月22日 原文日期: 2014年01月20日 原文链接: 5 Ways that CSS and JavaScript Interact That You ...
- 你可能不知道的Python面试秘籍 干货满满(附带参考答案)上篇
Q1.Python中的列表和元组有什么区别? 你可能不知道的Python面试秘籍 干货满满(附带参考答案)上篇 Q2.Python的主要功能是什么? Python是一种解释型语言.与C语言等语言不同, ...
- install npm 到某个文件下执行_你可能不知道的 npm 依赖管理那些事
点击上方蓝字关注我们 npm 是 Node.js 默认的.以 JavaScript 编写的包管理工具,如今,它已经成为世界上最大的包管理工具,是每个前端开发者必备的工具.不知你是否遇到过下面问题: 哎 ...
- 关于多线程编程您不知道的 5 件事 有关高性能线程处理的微妙之处
虽然很少有 Java™ 开发人员能够忽视多线程编程和支持它的 Java 平台库,更少有人有时间深入研究线程.相反地,我们临时学习线程,在需要时向我们的工具箱添加新的技巧和技术.以这种方式构建和运行适当 ...
- package.json作用
这个文档的内容是你必须要知道的,它必须是JSON文本格式.每个项目的根目录下面,一般都有一个package.json文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称.版本.许可证等元 ...
- Android Context完全解析,你所不知道的Context的各种细节
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/47028975 前几篇文章,我也是费劲心思写了一个ListView系列的三部曲,虽然 ...
- 异步height:calc_异步:您尚不知道的承诺(第1部分)
异步height:calc This is a multi-part blog post series highlighting the capabilities of asynquence, a p ...
- 一些你所不知道的VS Code插件
摘要: 你所不知道的系列. 原文:提高 JavaScript 开发效率的高级 VSCode 扩展之二! 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 作为一名业余爱好者.专业人员,甚 ...
最新文章
- 第二周期的第一次站立会议
- android 虚线
- vue java 使用AES 前后端加密解密
- IntelliJ IDEA部署tomcat时Edit Configuration无artifact选项
- 手机展示海报PSD模板、适用众多设计!
- 安装vs 2015 社区版
- Python-S9-Day123——爬虫两示例
- 简单整理一下以英文字母命名或者开头的语言
- 【全开源+免费更新】doodoo.js项目结构
- 树形表实现 bootstrap-table + treegrid
- IOS app蓝牙连接硬件设备 自动断开问题
- RGB565,RGB8888等相关
- java aes 中文_java实现AES加密(解决中文解密后乱码问题,解决传输字符串后解密报错的问题)...
- Head First C#中文版 图文皆译 (page13)
- 读书笔记-->《精益数据分析》第二部分 | 第15章:创业阶段2——黏性
- 杭州市拥北发展是否是最优解,拥江发展处于何种地位
- 2022-2028全球皮肤科冷冻外科装置市场现状及未来发展趋势
- FUNCTION 数据库名.GETDATE does not exist 详情页下单
- 推券客CMS免登陆火车头发布模块
- 阅读笔记《CKF滤波算法及其在航天器自主导航中的应用》
热门文章
- java类似php魔术方法_PHP与类有关的几个魔术方法
- python 命名实体识别_使用Python和Keras的有关命名实体识别(NER)的完整教程
- java string类型_java中String类型
- openstack一键安装脚本(转载)
- php对二维数据进行排序
- PyQt中从RAM新建QIcon对象 / Create a QIcon from binary data
- Unity3D Shader入门指南(二)
- Spoken English(001)
- C语言数组学完学啥,我的c语言学习-数组专题
- 智能家居 (3) ——智能家居工厂模式介绍实现继电器控制灯