资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/package.json文件各字段的说明

package.json文件各字段的说明

yzd / 2195人阅读

摘要：字段由脚本命令组成的字典，这些命令运行在包的各个生命周期中。在打包过程中，如果遇到字段会优先使用字段表示的路径下的文件，如果不存在，则用字段表示的作为入口，并按照的规范打包。其中还分析了文件中字段和字段的不同以及和两个字段的区别。

所有用npm下载的包或者要上传至npm的模块都会有一个package.json文件，这个文件总是存在于模块(或者包)的根目录下，这个文件到底是干嘛的，现在就来做一个简要说明。

1.package.json是什么

package.json是对下载的包或模块的描述信息，如果你要上传包到npm服务器也要有对应的模块说明。说明包括项目名称、版本、作者等等。package.json必须是一个严格的json格式，也就是说每一个字段都要使用双引号，不论是key值还是value值。

2.package.json字段说明

如果你要在npm上发布你的包，则package.json必须要有两个字段：name和version。其中name是包的名称，version是版本，对于这两个字段会有些约束。

name:
1)名称不能超过214个字符
2)名称不能以点或者下划线开头
3)包的名称中不能包含大写字母
4)此名称将会成为URL的一部分，因此不能包含非URL的字符

version:
1)版本号由主版本.此版本.补丁版本组成
2)版本必须要由node-semver解析，它与npm捆绑在一起作为依赖项。

除了这两个字段外，还有其他对应的描述信息，下面对常用的字段做一个说明。

description和keyword字段：这两个都是对应的描述信息，使用两个字段其中的某些内容进行搜索，可以在npm官网搜索到相关的包。不过这两个也有他们的区别，前者对应一个字符串，是对项目的一个简要说明，可以是一段描述的语句。而后者是一个字符串数组，就像写论文开头的关键字，我们可以看一下vue项目的package.json，他里面的description和keyword如下：

"description": "Reactive, component-oriented view layer for modern web interfaces.",
"keyword": [
    "vue"
]

可以看出，keyword字段必须是一个数组，即使数组中只有一个成员。另外，数组的成员要使用双引号，而数组的[]表示不需要双引号。

author字段：作者

homePage字段：该包的官网地址

main字段：字段指定了程序的主入口文件，使用遵循CommonJS规范的require("moduleName")就会加载main字段指定的目录下的文件。这个字段的默认值是模块根目录下面的index.js，也就是说如果不指定main字段，在其他模块引用此模块会默认加载根目录下的index.js文件。

module字段：此字段指定了使用ES6的module模块引入该模块时加载的文件路径，即使用import "xx" from "./xx"所指定的路径。关于main字段和module字段的区别会在下面讲。

dependencies字段和devDependencies字段：这两个字段表示项目的依赖，前者表示项目正常运行(生产环境)时需要的依赖，后者指开发(开发环境)时所需要的依赖。开发环境和生产环境后面会做说明。这两个字段都是一个对象，对象的成员又指定的模块和对应的版本组成，表示依赖的模块和版本范围，注意是版本范围。

scripts字段：由脚本命令组成的字典，这些命令运行在包的各个生命周期中。这里的键是生命周期事件名，值是要运行的命令。比如下面的字段：

"script": {
    "install": "scripts/install.js",
    "postinstall" : "scripts/install.js",
    "uninstall" : "scripts/uninstall.js",
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "build": "node build/build.js"
}

比如上面的install，在安装npm包时就应用后面的命令，即npm install会运行"script/install.js"命令。上面前三个是npm安装的生命周期，后面的几个就是自定义的命令了，比如使用npm run build运行build后面的命令。

engine字段：表示你的项目所运行的node版本。不指定engine字段，或者用*表示不限制node版本。

3.main字段和module字段

要理解main字段和module字段的不同要先明白Tree-Shaking的机制，简单来讲，Tree-Shaking的作用是将没有用到的代码全部过滤掉，但是在使用main字段作为入口导入的文件是遵循CommonJS规范的，也就是说暴露出的代码是作为export对象的一个属性，举例来讲，如果暴露出一个add的方法作为export的属性，那在外部访问的时候如果使用"a"+"dd"的方式访问，打包工具是无法检测到是否使用了add这个方法，因为访问js的对象属性实在是太灵活了。如果使用ES6的module新特性，则不需要将其作为export对象的属性暴露出来的，而且ES6提出的module模块有更好的模块特性。这样的话打包的时候打包工具就能够检测到暴露出来的那些方法没有用到的，以便除去这些代码。

在package.json文档中并没有提到module字段，那为什么会出现module的字段，其实这是rollup最早提出的概念pkg.module。在早期很多npm包都是遵循CommonJS规范的，那时package.json长这样:

{
    "name": "xxx",
    "version": "1.0.0",
    "main": "lib/index.js"
}

在模块中使用require("xxx")，会将require的参数(xxx)作为一个包来进行查找，读取该目录下package.json文件，取得main字段指定的文件作为入口。但在ES6盛行之后有了module模块，并且这是官方标准，用起来更顺手，而CommonJS还是传统格式，所以rollup利用ES6的module新特性，在打包的性能上有了一个很好的提高。

那既然main字段可以作为文件的入口，何必还要module字段的呢？原因有以下两点：

1)按照约定发布在npm上面的包都是基于ES5规范的，而且通常我们在使用babel工具将ES6编译为ES5的过程中是将node_modules目录下的文件过滤掉的，也就是说node_modules目录下的文件将不会被babel工具编译，这是因为避免babel编译node_modules目录下的文件会极大提高编译速度。但如果我们把main字段直接指向我们用ES6语法写的源码上用户就要打开babel编译工具配置其编译node_modules目录下的文件。

2)如果用户开发的是node环境下的项目使用到我们发布的基于ES6语法写的源码，可能连打包的步骤都不会有，而他的是node环境恰巧不支持ES6的语法，那代码就会报错。

因此main字段应该是指向编译后的ES5的代码，于是就应该出现一种新的字段解决这个问题，此时module字段就出现了，那现在的package.json长这样：

{
    "name": "xxx",
    "version": "1.0.0",
    "main": "lib/index.js",
    "module": "lib/index.esm.js" 
}

以上说明，我们的main字段应该指向基于CommonJS规范而使用ES5语法写的源码，而moudle字段应该是指向遵循ES6模块规范的(也就是说使用ES6模块导出的，这样是为了能够让打包工具使用Tree-Shaking机制打包代码)而使用ES5语法编写的源码，这是为了避免用户在使用babel编译工具屏蔽掉了node_modules目录中的文件。我们可以看一下Vue源码中package.json中main和module字段指定的源码就是这样做的。

在webpack2.0版本以上打包过程中，也逐渐开始支持module字段。在打包过程中，如果遇到module字段会优先使用module字段表示的路径下的文件，如果module不存在，则用main字段表示的作为入口，并按照CommonJS的规范打包。

4.开发环境、生产环境和测试环境

开发环境就是开发时候的服务器，配置比较随意，会打开所有的错误提醒，尽量让开发中的错误、bug等全部暴露出来方便调试。

测试环境一般是模拟真实运行环境，拷贝一份与真实环境相同的配置做各种测试，使其尽可能多的暴露出程序的问题出来方便修改。

生产环境就是真实运行环境，是对外提供服务的，一般会关闭错误报告，打开错误日志，收集错误，方便修改bug。

这三个环境就是一个项目所经历的三个过程，开发 --> 测试 --> 上线

项目中我们可以使用process.env.NODE_ENV来取得当前的环境，开发环境返回字符串"development"，生产环境返回字符串"production"

5.创建package.json

使用npm的init命令创建一个package.json文件。之后会逐行提示你输入每个字段的值。当然也可输入npm init -y生成一个各字段默认值的packake.json文件

6.总结

本文讲了package.json文件的作用、其中个字段的说明以及如何生成package.json文件。其中还分析了package.json文件中main字段和module字段的不同以及dependencies和devDependencies两个字段的区别。文中若有表述不妥或是知识点有误之处，欢迎留言指正批评！

云服务器 GPU云服务器 package.json 字段类型说明 cdn日志字段说明 linux 防火墙文件说明

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99660.html

相关文章

  • Monorepo——大型前端项目的代码管理方式

    摘要：目前最常见的解决方案是和的特性。具体的使用方法移步官网而使用作为包管理器的同学，可以在中以字段声明，就会以的方式管理。这样的话，无论你的包管理器是还是，都能发挥的优势要是包管理是，就会把依赖安装交给处理。 最近我接手了一个项目，代码量比较大、有点复杂。仓库 clone 下来代码有 50+ MB，npm install 安装完体积飚到了近 2GB …… 熟悉了一下，这个项目比较复杂，采用...

    ziwenxie 评论0 收藏0

  • 封装框架的实践

    摘要：最近在尝试着封装一个框架，碍于种种原因，先从简单的入手吧。基于和封装的框架，集成数据存储字体图标库拓展语言网络请求等模块，为了让业务开发更专注于数据驱动。 最近在尝试着封装一个框架，碍于种种原因，先从简单的入手吧。基于vue和elementUI封装的框架，集成 数据存储localforage、字体图标库font-awesome、css拓展语言scss、网络请求axios等模块，为了让业...

    Dogee 评论0 收藏0

  • package.json 中的 Module 字段是干嘛的

    摘要：为何有查阅了的文档，并没有找到字段的定义，直到才知道它是中最早就提出的概念。况且目前大部分仍是采用，所以便使用了另一个字段。所以目前主流的打包工具都是支持的，鉴于其优点，字段很有可能加入的规范之中。 引入 最近团队的一个同学在搞 npm library 源码的调试插件，因为内部的一个组件库含有大量的逻辑，在某个项目中不经意就出现一个磨人的 bug，但是组件库发布都是打包编译后的代码，而...

    gnehc 评论0 收藏0

  • 2018 年了，你还是只会 npm install 吗

    摘要：无需手动拷贝文件或者创建软链接到目录，有更优雅的解决方案。这是因为识别协议的，得知这个包需要直接从文件系统中获取，会自动创建软链接到中，完成安装过程。 nodejs 社区乃至 Web 前端工程化领域发展到今天，作为 node 自带的包管理工具的 npm 已经成为每个前端开发者必备的工具。但是现实状况是，我们很多人对这个nodejs基础设施的使用和了解还停留在: 会用 npm insta...

    libxd 评论0 收藏0

  • 快速写个node命令行工具

    摘要：一快速入手背景好多包都提供命令行工具。二与命令行工具先初始化个项目配置创建文件，把路径添加到中这些固定的工作可以由帮我们完成。参考用创建命令行工具配置 一、快速入手 1.1 背景： 好多nodejs包都提供命令行工具。咱也来学学吧。 1.2 刀耕火种时代： 环境：win32_X86nodejs: v5.9.1npm: 3.7.3首先创建个bat文件（cli-demo.bat），bat文...

    QLQ 评论0 收藏0

发表评论

登陆后可评论

0条评论

yzd

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<