深入浅出一张图解析package.json文件

在 Node.js 中,模块是一个库或框架,也是一个 Node.js 项目。Node.js 项目遵循模块化的架构,当我们创建了一个 Node.js 项目,意味着创建了一个模块,这个模块必须有一个描述文件,即 package.json。它是我们最常见的配置文件,但是它里面的配置你真的有详细了解过吗?配置一个合理的 package.json 文件直接决定着我们项目的质量,本章就带大家了解下 package.json 的各项详细配置。

package.json 中有非常多的属性,其中必须填写的只有两个:name 和 version ,这两个属性组成一个 npm 模块的唯一标识。

其中版本我们在上一章节已经介绍过了,有兴趣的可以查看 前端工程化(一)NPM如何管理依赖包版本?

name 即模块名称,其命名时需要遵循官方的一些规范和建议:

  • 包名会成为模块url、命令行中的一个参数或者一个文件夹名称,任何非url安全的字符在包名中都不能使用,可以使用 validate-npm-package-name 包来检测包名是否合法。
  • 语义化包名,可以帮助开发者更快的找到需要的包,并且避免意外获取错误的包。
  • 若包名称中存在一些符号,将符号去除后不得与现有包名重复

例如:由于react-native已经存在,react.native、reactnative都不可以再创建。

  • 如果你的包名与现有的包名太相近导致你不能发布这个包,那么推荐将这个包发布到你的作用域下。

例如:用户名 conard,那么作用域为 @conard,发布的包可以是@conard/react。

name 是一个包的唯一标识,不得和其他包名重复,我们可以执行 npm view packageName 查看包是否被占用,并可以查看它的一些基本信息:

若包名称从未被使用过,则会抛出 404 错误:

另外,你还可以去 https://www.npmjs.com/ 查询更多更详细的包信息。

description用于添加模块的的描述信息,方便别人了解你的模块。

keywords用于给你的模块添加关键字。

当然,他们的还有一个非常重要的作用,就是利于模块检索。当你使用 npm search 检索模块时,会到description 和 keywords 中进行匹配。写好 description 和 keywords 有利于你的模块获得更多更精准的曝光:

描述开发人员的字段有两个:author 和 contributors, author 指包的主要作者,一个 author 对应一个人。 contributors 指贡献者信息,一个 contributors 对应多个贡献者,值为数组,对人的描述可以是一个字符串,也可以是下面的结构:

homepage 用于指定该模块的主页。

repository 用于指定模块的代码仓库。

bugs 指定一个地址或者一个邮箱,对你的模块存在疑问的人可以到这里提出问题。

我们的项目可能依赖一个或多个外部依赖包,根据依赖包的不同用途,我们将他们配置在下面几个属性下:dependencies、devDependencies、peerDependencies、bundledDependencies、optionalDependencies。

在介绍几种依赖配置之前,首先我们来看一下依赖的配置规则,你看到的依赖包配置可能是下面这样的:

依赖配置遵循下面几种配置规则:

  • 依赖包名称:VERSIONVERSION是一个遵循SemVer规范的版本号配置,npm install 时将到npm服务器下载符合指定版本范围的包。
  • 依赖包名称:DWONLOAD_URLDWONLOAD_URL 是一个可下载的tarball压缩包地址,模块安装时会将这个.tar下载并安装到本地。
  • 依赖包名称:LOCAL_PATHLOCAL_PATH 是一个本地的依赖包路径,例如 file:../pacakges/pkgName。适用于你在本地测试一个npm包,不应该将这种方法应用于线上。
  • 依赖包名称:GITHUB_URLGITHUB_URL 即 github 的 username/modulename 的写法,例如:ant-design/ant-design,你还可以在后面指定 tag 和 commit id。
  • 依赖包名称:GIT_URLGIT_URL 即我们平时clone代码库的 git url,其遵循以下形式:

其中 protocal 可以是以下几种形式:

  • git://github.com/user/project.git#commit-ish
  • git+ssh://user@hostname:project.git#commit-ish
  • git+ssh://user@hostname/project.git#commit-ish
  • git+http://user@hostname/project/blah.git#commit-ish
  • git+https://user@hostname/project/blah.git#commit-ish

dependencies 指定了项目运行所依赖的模块,开发环境和生产环境的依赖模块都可以配置到这里,例如

有一些包有可能你只是在开发环境中用到,例如你用于检测代码规范的 eslint ,用于进行测试的 jest ,用户使用你的包时即使不安装这些依赖也可以正常运行,反而安装他们会耗费更多的时间和资源,所以你可以把这些依赖添加到 devDependencies 中,这些依赖照样会在你本地进行 npm install 时被安装和管理,但是不会被安装到生产环境:

peerDependencies 用于指定你正在开发的模块所依赖的版本以及用户安装的依赖包版本的兼容性。

上面的说法可能有点太抽象,我们直接拿 ant-design 来举个例子,ant-design 的 package.json 中有如下配置:

当你正在开发一个系统,使用了 ant-design ,所以也肯定需要依赖 React。同时, ant-design 也是需要依赖 React 的,它要保持稳定运行所需要的 React 版本是16.0.0,而你开发时依赖的 React 版本是 15.x:

这时,ant-design 要使用 React,并将其引入:

这时取到的是宿主环境也就是你的环境中的 React 版本,这就可能造成一些问题。在 npm2 的时候,指定上面的 peerDependencies 将意味着强制宿主环境安装 react@>=16.0.0和react-dom@>=16.0.0 的版本。

npm3 以后不会再要求 peerDependencies 所指定的依赖包被强制安装,相反 npm3 会在安装结束后检查本次安装是否正确,如果不正确会给用户打印警告提示。

例如,我在项目中依赖了 antd 的最新版本,然后依赖了 react 的 15.6.0版本,在进行依赖安装时将给出以下警告:

某些场景下,依赖包可能不是强依赖的,这个依赖包的功能可有可无,当这个依赖包无法被获取到时,你希望 npm install 继续运行,而不会导致失败,你可以将这个依赖放到 optionalDependencies 中,注意 optionalDependencies 中的配置将会覆盖掉 dependencies 所以只需在一个地方进行配置。

当然,引用 optionalDependencies 中安装的依赖时,一定要做好异常处理,否则在模块获取不到时会导致报错。

和以上几个不同,bundledDependencies 的值是一个数组,数组里可以指定一些模块,这些模块将在这个包发布时被一起打包。

license 字段用于指定软件的开源协议,开源协议里面详尽表述了其他人获得你代码后拥有的权利,可以对你的的代码进行何种操作,何种操作又是被禁止的。同一款协议有很多变种,协议太宽松会导致作者丧失对作品的很多权利,太严格又不便于使用者使用及作品的传播,所以开源作者要考虑自己对作品想保留哪些权利,放开哪些限制。

软件协议可分为开源和商业两类,对于商业协议,或者叫法律声明、许可协议,每个软件会有自己的一套行文,由软件作者或专门律师撰写,对于大多数人来说不必自己花时间和精力去写繁长的许可协议,选择一份广为流传的开源协议就是个不错的选择。

以下就是几种主流的开源协议:

  • MIT:只要用户在项目副本中包含了版权声明和许可声明,他们就可以拿你的代码做任何想做的事情,你也无需承担任何责任。
  • Apache:类似于 MIT,同时还包含了贡献者向用户提供专利授权相关的条款。
  • GPL:修改项目代码的用户再次分发源码或二进制代码时,必须公布他的相关修改。

如果你对开源协议有更详细的要求,可以到 https://choosealicense.com/ 获取更详细的开源协议说明。

main 属性可以指定程序的主入口文件,例如,上面 antd 指定的模块入口 lib/index.js ,当我们在代码用引入 antd 时:import { notification } from \’antd\’; 实际上引入的就是 lib/index.js 中暴露出去的模块。

当你的模块是一个命令行工具时,你需要为命令行工具指定一个入口,即指定你的命令名称和本地可指定文件的对应关系。如果是全局安装,npm 将会使用符号链接把可执行文件链接到 /usr/local/bin,如果是本地安装,会链接到 ./node_modules/.bin/。

例如上面的配置:当你的包安装到全局时:npm 会在 /usr/local/bin下创建一个以 conard 为名字的软链接,指向全局安装下来的 conard 包下面的 \”./bin/index.js\”。这时你在命令行执行 conard 则会调用链接到的这个js文件。

这里不再过多展开,更多内容在我后续的命令行工具文章中会进行详细讲解。

files 属性用于描述你 npm publish 后推送到 npm 服务器的文件列表,如果指定文件夹,则文件夹内的所有内容都会包含进来。我们可以看到下载后的包是下面的目录结构:

另外,你还可以通过配置一个 .npmignore 文件来排除一些文件, 防止大量的垃圾文件推送到 npm, 规则上和你用的 .gitignore 是一样的。.gitignore 文件也可以充当.npmignore 文件。

man 命令是 Linux 下的帮助指令,通过 man 指令可以查看 Linux 中的指令帮助、配置文件帮助和编程帮助等信息。

如果你的 node.js 模块是一个全局的命令行工具,在 package.json 通过 man 属性可以指定 man 命令查找的文档地址。

man 文件必须以数字结尾,或者如果被压缩了,以 .gz 结尾。数字表示文件将被安装到 man 的哪个部分。如果 man 文件名称不是以模块名称开头的,安装的时候会给加上模块名称前缀。

例如下面这段配置:

在命令行输入 man npm-audit :

一个 node.js 模块是基于 CommonJS 模块化规范实现的,严格按照 CommonJS 规范,模块目录下除了必须包含包描述文件 package.json 以外,还需要包含以下目录:

  • bin:存放可执行二进制文件的目录
  • lib:存放js代码的目录
  • doc:存放文档的目录
  • test:存放单元测试用例代码的目录

在模块目录中你可能没有严格按照以上结构组织或命名,你可以通过在 package.json 指定 directories 属性来指定你的目录结构和上述的规范结构的对应情况。除此之外 directories 属性暂时没有其他应用。

不过官方文档表示,虽然目前这个属性没有什么重要作用,未来可能会整出一些花样出来,例如:doc 中存放的 markdown 文件、example 中存放的示例文件,可能会友好的展示出来。

scripts 用于配置一些脚本命令的缩写,各个脚本可以互相组合使用,这些脚本可以覆盖整个项目的生命周期,配置后可使用 npm run command 进行调用。如果是 npm 关键字,则可以直接调用。例如,上面的配置制定了以下几个命令:npm run test、npm run dist、npm run compile、npm run build。

config 字段用于配置脚本中使用的环境变量,例如下面的配置,可以在脚本中使用process.env.npm_package_config_port进行获取。

如果你的 node.js 模块主要用于安装到全局的命令行工具,那么该值设置为 true ,当用户将该模块安装到本地时,将得到一个警告。这个配置并不会阻止用户安装,而是会提示用户防止错误使用而引发一些问题。

如果将 private 属性设置为 true,npm将拒绝发布它,这是为了防止一个私有模块被无意间发布出去。

发布模块时更详细的配置,例如你可以配置只发布某个 tag、配置发布到的私有 npm 源。更详细的配置可以参考 npm-config

假如你开发了一个模块,只能跑在 darwin 系统下,你需要保证 windows 用户不会安装到你的模块,从而避免发生不必要的错误。

使用 os 属性可以帮助你完成以上的需求,你可以指定你的模块只能被安装在某些系统下,或者指定一个不能安装的系统黑名单:

例如,我把一个测试模块指定一个系统黑名单:\”os\” : [ \”!darwin\” ],当我在此系统下安装它时会爆出如下错误:

在node环境下可以使用 process.platform 来判断操作系统。

和上面的 os 类似,我们可以用 cpu 属性更精准的限制用户安装环境:

在node环境下可以使用 process.arch 来判断 cpu 架构。

http://caibaojian.com/npm/files/package.json.html

app.json是什么样的文件

我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

app.json文件是全局配置文件之一:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

{

\”pages\”:[ //这个里边都是用来配置所需要用到的界面所在的文件路径,配置为第一行的是默认显示的页面。

\”pages/index/index\”,

\”pages/——–/——–”,

\”pages/——–/——–\”,

\”pages/——–/——-\”//记住最后一行不要加逗号

],

\”window\”:{ //这个属性是用来配置界面的上边的标题栏的,

\”backgroundTextStyle\”:\”light\”,//这个用来设置文本的风格。

\”navigationBarBackgroundColor\”: \”#0066CC\”,//这个是背景颜色,记住用这种颜色格式的,不要用七种颜色的英文单词(red,blue)等,不然不起效果

\”navigationBarTitleText\”: \”——–\”,//这个就是文字内容

\”navigationBarTextStyle\”:\”white\”//这个是文字的颜色。

},

\”tabBar\”: {//这个的话就是配置下边的菜单栏。

\”color\”: \”#0066CC\”,//这个是配置文字的颜色

\”selectedColor\”: \”#FF0033\”,//这个是配置选中某个菜单时文字的颜色。

\”borderStyle\”: \”#336699\”,

\”backgroundColor\”: \”#99CC00\”,//这个是整个菜单栏的背景颜色

\”list\”: [//这个是列表,就是具体设置菜单栏

{

\”text\”: \”—–\”,//文字

\”pagePath\”: \”pages/index/index\”,//就是对应到那个页面

\”iconPath\”: \”image/——–\”,//默认的图片

\”selectedIconPath\”: \”image/——–\”//选中以后显示的图片。

}

–可以根据自己需要来加—

]

}

以上就是app.json是什么样的文件的详细内容,更多请关注其它相关文章!

更多技巧请《转发 + 关注》哦!

打开JSON文件的六种方法,总有一种适合你

JSON(JavaScript Object Notation)是从JavaScript派生的一个独立于语言的文件。JSON文件是纯文本文件,而不是二进制代码。这种文件格式是可读的,任何文本编辑器都可以打开和编辑JSON文件。

此文件格式没有大小限制,因此数据大小可能很大很大。但是,如果文件太大,则存储的数据可能显示为随机的。这可能会导致难以理解整体内容。在这种情况下,你可以使用一些程序来查看此类JSON文件,我们在下面列出了这些文件。

JSON文件的文件名附加了一个.JSON扩展名。与XML类似,它是一种数据表示格式。由于以这种格式存储数据和配置文件很容易,大多数人都使用它。以下是为不同系统打开JSON文件的几种方法。

你可以使用记事本打开.json文件并进行更改。虽然JSON文件很容易理解,但如果文件太大,内置记事本可能会混淆数据。为了使文件更易于理解或组织,你可以使用Notepad++。以下是如何在Windows上使用记事本打开JSON文件。

1、启动记事本/Notepad++。

2、单击左上角的“文件”选项。

3、选择“打开…”选项。

4、在文件名搜索栏上搜索JSON文件。

5、单击“打开”按钮。

在完成这些步骤后,以下是你可以做的事情,使你的JSON文件在Notepad++上看起来更有条理。

1、单击“插件”选项,然后选择“插件管理…”选项。

2、搜索JSON并选择JSON Viewer选项。

3、单击右上角的“安装”选项。

4、单击确认框中的“是”。

5、安装插件后,再次单击“插件”选项。

6、选择JSON查看器选项,然后单击格式化JSON。

Apple Text Edit是macOS附带的一款软件。它是一个内置的文字处理器和文本编辑器平台。使用此软件,你可以在Mac上轻松打开和编辑JSON文件。以下是如何查看它。

1、在Mac设备上打开TextEdit。

2、单击“文件”并选择“打开”选项。

3、导航到JSON文件并单击它。

Vim是UNIX的Vi编辑器的著名继承者。这是一个免费的文件打开软件,可以让你查看和更改你的文件。这个程序最初是为Linux制作的。然而,他们最终为不同的系统创建了各种版本的编辑器,包括Windows和Mac。以下是如何使用它打开JSON文件。

1、复制JSON文件的路径并启动Vim。

2、输入“vim ”(后面有个空格)并从剪贴板粘贴路径。

3、然后按Enter键。

Mozilla Firefox是查看JSON文件的最佳平台之一。除了.json扩展之外,Mozilla firefox还支持以下文件:HTML、CSS、MFL和CHM。与大多数程序不同,Firefox以人类可读的格式打开文件。在执行以下步骤之前,请确保你已经下载了Firefox浏览器。

1、转到文件资源管理器并导航到JSON文件。

2、右键单击它,然后选择“属性”选项。

3、单击“文件类型”下的“更改…”按钮。

4、搜索Mozilla Firefox并点击它。如果你在菜单上找不到它,请按底部的“更多应用程序”选项,然后再次搜索。

5、单击“确定”按钮。

6、同时单击“属性”选项卡上的“确定”。

7、现在,点击JSON文件将其打开。该文件将显示在firefox选项卡中。

你可以在Chrome上轻松打开JSON文件。然而,大数据可能看起来杂乱无章,难以理解。添加扩展名使JSON文件易于阅读。数据看起来更有组织性和格式。你可以在Windows、Linux以及Macbook上使用此方法。

1、打开Chrome并转到Chrome Web Store。

2、在搜索栏上搜索JSON Viewer,然后按enter按钮。

3、打开要添加的扩展。

4、单击“添加到Chrome”选项。

5、在确认框中选择“添加扩展名”。

6、将扩展与你的设备同步。

7、现在,打开文件资源管理器并导航到JSON文件。

8、在文件上单击鼠标右键,然后选择“属性”选项。

9、在“文件类型”下,单击“更改…”选项。

10、搜索谷歌浏览器并点击它。

11、单击“确定”。

12、同时单击“属性”选项卡上的“确定”按钮。

13、返回JSON文件并打开它。你将在一个新的chrome选项卡中查看该文件。

有各种在线工具,如JSON Editor online,可以用来在设备上打开JSON文件。这些文件打开工具非常容易使用。要查看你的文件,你所需要的只是正确的互联网连接。以下是如何打开它。

1、打开web浏览器,在线搜索JSON编辑器。

2、单击右上角的“打开”图标。

3、选择从磁盘打开选项。

4、搜索你的JSON文件并单击它。

5、单击“打开”选项。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com

点赞 0
收藏 0

文章为作者独立观点不代本网立场,未经允许不得转载。