前端项目中package.json到底是什么，又充当着什么作用呢？一文来带你了解package.json！

Posted 2021-09-24 前端纸飞机

大家好，我是纸飞机，想必大家都在项目中经常看见package.json、package-lock.json、node_modules这三剑客，那么他们到底是什么呢？又有什么作用呢？今天就来带你们理一遍！ 

一、引读

在大家的印象中，说明书具有哪些要素？例如一盒药。

就像这份说明书，它有：药品名称、成分、类别等等说明！package.json同样如此，所以可以毫不夸张的说，它也是一份说明书！那么我们的package.json到底说明了什么呢？下面就进入正题为您一一讲解。

二、package.json说明了哪些内容

文件展示：

{
  "name": "firstapp",
  "version": "0.1.0",
  "author": "zhangsan <[e-mail]>",
  "description": "我就是世界上第一个node.js程序",
  "keywords": ["node.js", "javascript"],
  "private": true,
  "bugs": {
    "url": "http://path/to/bug",
    "email": "[e-mail]"
  },
  "contributors": [{
    "name": "张不烂",
    "email": "[e-mail]"
  }],
  "repository": {
    "type": "git",
    "url": "https://path/to/url"
  },
  "homepage": "http://necolas.github.io/normalize.css",
  "license": "MIT",
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1"
  },
  "devDependencies": {
    "browserify": "~13.0.0",
    "karma-browserify": "~5.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "bin": {
    "webpack": "./bin/webpack.js"
  },
  "main": "lib/webpack.js",
  "module": "es/index.js",
  "eslintConfig": {
    "extends": "react-app"
  },
  "engines": {
    "node": ">=0.10.3 <0.12"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "style": [
    "./node_modules/tipso/src/tipso.css"
  ],
  "files": [
    "lib/",
    "bin/",
    "buildin/",
    "declarations/",
    "hot/",
    "web_modules/",
    "schemas/",
    "SECURITY.md"
  ]
}

参数	内容
name	项目/模块名称，长度必须小于等于214个字符，不能以"."(点)或者"_"(下划线)开头，不能包含大写字母
version	项目版本
author	项目开发者，它的值是你在https://npmjs.org网站的有效账户名，遵循“账户名<邮件>”的规则，例如：zhangsan [e-mail]
description	项目描述，是一个字符串。它可以帮助人们在使用npm search时找到这个包
keywords	项目关键字，是一个字符串数组。它可以帮助人们在使用npm search时找到这个包
private	是否私有，设置为 true 时，npm 拒绝发布
license	软件授权条款，让用户知道他们的使用权利和限制
bugs	bug 提交地址
contributors	项目贡献者
repository	项目仓库地址
homepage	项目包的官网 URL
dependencies	生产环境下，项目运行所需依赖
devDependencies	开发环境下，项目所需依赖
scripts	执行 npm 脚本命令简写，比如 “start”: “react-scripts start”, 执行 npm start 就是运行 “react-scripts start”
bin	内部命令对应的可执行文件的路径
main	项目默认执行文件，比如 require(‘webpack’)；就会默认加载 lib 目录下的 webpack.js 文件，如果没有设置，则默认加载项目跟目录下的 index.js 文件
module	以 ES Module(也就是 ES6)模块化方式进行加载，因为早期没有 ES6 模块化方案时，都是遵循 CommonJS 规范，而 CommonJS 规范的包是以 main 的方式表示入口文件的，为了区分就新增了 module 方式，但是 ES6 模块化方案效率更高，所以会优先查看是否有 module 字段，没有才使用 main 字段
eslintConfig	EsLint 检查文件配置，自动读取验证
engines	项目运行的平台
browserslist	供浏览器使用的版本列表
style	供浏览器使用时，样式文件所在的位置；样式文件打包工具parcelify，通过它知道样式文件的打包位置
files	被项目包含的文件名数组

Tip：加粗部分请重点了解。

那么这么个文件如何创建呢？

先新建文件夹再：

npm init -y

这样就初始化了一个package.json。

三、package-lock.json

用一句话来概括很简单，就是锁定安装时的包的版本号，并且需要上传到git，以保证其他人在npm install时大家的依赖能保证一致。

四、node_modules

node_modules是安装node后用来存放用包管理工具下载安装的包的文件夹。比如webpack、gulp、grunt这些工具。在node.js中模块与文件是一一对应的，也就是说一个node.js文件就是一个模块。

modules(模块)：

在node.js中模块与文件是一一对应的，也就是说一个node.js文件就是一个模块，文件内容可能是我们封装好的一些JavaScript方法、jsON数据、编译过的C/C++拓展等，在关于node.js的误会提到过node.js的架构。

其中http、fs、net等都是node.js提供的核心模块，使用C/C++实现，外部用JavaScript封装。

require搜索module方式：

node.js中模块有两种类型：核心模块和文件模块，核心模块直接使用名称获取，比如最长用的http模块。

var http = require('http');

在上面例子中我们使用了相对路径 './test'来获取自定义文件模块。

node加载模块的方法：

核心模块优先级最高，直接使用名字加载，在有命名冲突的时候首先加载核心模块，文件模块只能按照路径加载。（可以省略默认的.js拓展名，不是的话需要显示声明书写） 

• 绝对路径
• 相对路径