你可能不知道的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年内前端人走向前列。

识别方二维码加我微信、拉你进源码共读

今日话题

略。欢迎分享、收藏、点赞、在看我的公众号文章~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/275488.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于上下文的rpn_构建事物-产品评论视频中基于上下文的情感分析

基于上下文的rpnThe word “Social” has taken a whole new meaning in today’s digital era. Simply going out to enjoy is no longer the only “social” criteria. Social now is — giving a peek in your personal and professional life to your connections. Facebo…

可爱的 Python: 使用 mechanize 和 Beautiful Soup 轻松收集 Web 数据

可爱的 Python: 使用 mechanize 和 Beautiful Soup 轻松收集 Web 数据 使用 Python 工具简化 Web 站点数据的提取和组织 David Mertz, Ph.D., 开发人员, Gnosis Software, Inc.从 2000 年开始,David Mertz 就一直在为 developerWorks 专栏 Charming Python 和 XML M…

JavaScript 断点调试技巧

大家好,我是若川。最近组织了源码共度活动:1个月,200人,一起读了4周源码,参与的小伙伴都表示收获很大。如果感兴趣可以点击链接扫码加我微信 ruochuan12。之前推荐过很多次调试文章,说明调试的重要性&#…

大学生电子设计大赛案例分析_为大学生设计问答平台—案例研究

大学生电子设计大赛案例分析Dealing with academic-related questions like picking a course, fulfilling a major requirement can be tedious and ineffective when you have to simultaneously balance school work, social activities, and focus on personal growth and …

最新最详细最简洁Eclipse调试PHP配置详解(Xdebug,Zend Debugger)

搬家注:该日志写于2011 年 04 月 07 日,Eclipse,PHP等版本号很多,更新也比较快,请注意文章中的版本。本文不一定帮您解决问题,但能给您一些解决问题的思路及一些概念。 最近开始做SRTP项目WebOS&#xff0c…

入门前端学习路线图【送书】

大家好,我是若川。记得点上方音频听小姐姐配音,超级好听。华章图书又赞助了书籍送福利给大家。本次送4本书的抽奖方式是:截止到9月6日(周一)20:00,在留言区留言任意内容。我会在留言区抽取「1位」关注我公众…

单选按钮设置为被选中状态_为什么要设置错误的按钮状态

单选按钮设置为被选中状态当正确的方法出错时 (When the right way goes wrong) Let’s say you want to create a click effect on an HTML button. The first idea that many people get is to do something that reproduces the feeling of the sound emitted by a real but…

「娃娃分享」-常见自校检分析实例.

自校检是许多软件的保护手段之一,对软件加个简单的壳再增加自校检在一定程序上可以抵挡住一大部分新手,不过,对许多人来说,这个保护已经很弱了。。下面讲几种常见的解决自校检方法,写的粗略,希望大家补充。…

用VC和MinGW导出dll的def和lib(a)文件

为什么80%的码农都做不了架构师?>>> 原文地址:http://zhangyafeikimi.iteye.com/blog/404580 有了dll文件需要导出def文件: pexports zlib1.dll > zlib1.def 有了dll和def文件,需要导出MinGW的.a文件:…

产品设计美学案例分析_美学在产品设计中的重要性

产品设计美学案例分析重点 (Top highlight)In one of my previous jobs, I had really interesting debates with the CEO regarding whether we should spend more time improving the way our app looks and feels. ‘How could he not care that the design is outdated?! …

即将到来的ECMAScript 2022标准

大家好,我是若川。周末分享一篇相对简单的文章。最近组织了源码共度活动:1个月,200人,一起读了4周源码,参与的小伙伴都表示收获很大。如果感兴趣可以点击链接扫码加我微信 ruochuan12。另外:昨天的推文入门…

c语言中二叉树中总结点,C语言二叉树的三种遍历方式的实现及原理

二叉树遍历分为三种:前序、中序、后序,其中序遍历最为重要。为啥叫这个名字?是根据根节点的顺序命名的。比如上图正常的一个满节点,A:根节点、B:左节点、C:右节点,前序顺序是ABC(根节…

动态库的创建与使用

1、动态库文件的创建 (1)编写源文件 (2)编译生成动态库 g -fPIC -shared -o libfile_operation.so file_operation.cpp 此编译过程分为两步,等同于下面的两个命令: g -c -fPIC file_operation.cpp …

ux设计中的各种地图_UX写作中的移情

ux设计中的各种地图Demetri Martin is a master of comedic situations. If you’ve never seen Demetri Martin是喜剧情境的大师。 如果你从未见过 him before, he has a sort of dry brand of observational humor, relying more on anecdotes than full stories, and often…

字符串搜索。HOJ1530 Compound Words。

stl set实现字符串搜索。。效率一般。(附二分搜索。) Compound WordsTime limit:1sec.Submitted:233Memory limit:32MAccepted:81Source: Waterloo ACM Programming Contest Sep 28, 1996 You are to find all the two-word compound words in a dictionary. A two-word compo…

字节3-1前端面试官自学Vue的正确姿势

大家好,我是若川。前不久和一个字节前端TL朋友聊天,说到大厂前端供需脱节的情况。特别是使用Vue框架的,因为简单易学好上手,但是能够深入理解的人并不多,大多都只停留在应用层面,缺乏更深层面的理解。尤其是…

苹果风格ui_苹果如何使Soft-UI成为未来

苹果风格ui重点 (Top highlight)Apple announced some pretty wild updates at WWDC 2020 today.苹果今天在WWDC 2020上宣布了一些相当疯狂的更新。 But technology aside, let’s focus on how their UI has changed. It went through the first bitmap representations, thr…

【数据结构】量子危机

问题 宇宙时间公元 5.55 亿年,由于某种原因两大联盟展开了激战(maxingc 联盟采用了微子技术): 邪恶的 maxingc 联盟采集好了微子能,就要运输。Maxingc 联盟的领袖 xc 此时才发现,自己的军事基地中由微子发射…

android 自定义menu背景,Android编程实现自定义系统菜单背景的方法

本文实例讲述了Android编程实现自定义系统菜单背景的方法。分享给大家供大家参考,具体如下:不多说,上图,见代码。package lab.sodino.menutest;import android.content.Context;import android.app.Activity;import android.os.Bu…

面试官问 async、await 函数原理是在问什么?

大家好,我是若川。这是 源码共读活动《1个月,200人,一起读了4周源码》 第四期,纪年小姐姐的第四次投稿。纪年小姐姐通过本次学习提早接触到generator,协程概念,了解了async/await函数的原理等。第四期是 学…