所有用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两个字段的区别。文中若有表述不妥或是知识点有误之处，欢迎留言指正批评！