大家好，我是紙飛機，想必大家都在項目中經常看見package.json、package-lock.json、node_modules這三劍客，那么他們到底是什么呢？又有什么作用呢？今天就來帶你們理一遍！?

一、引讀

在大家的印象中，說明書具有哪些要素？例如一盒藥。

就像這份說明書，它有：藥品名稱、成分、類別等等說明！package.json同樣如此，所以可以毫不夸張的說，它也是一份說明書！那么我們的package.json到底說明了什么呢？下面就進入正題為您一一講解。

二、package.json說明了哪些內容

文件展示：

{"name": "firstapp","version": "0.1.0","author": "zhangsan <zhangsan@163.com>","description": "我就是世界上第一個node.js程序","keywords": ["node.js", "javascript"],"private": true,"bugs": {"url": "http://path/to/bug","email": "bug@example.com"},"contributors": [{"name": "張不爛","email": "lisi@example.com"}],"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?zhangsan@163.com
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拓展名，不是的話需要顯示聲明書寫）?

• 絕對路徑
• 相對路徑?

總結

以上是生活随笔為你收集整理的前端项目中package.json到底是什么，又充当着什么作用呢？一文来带你了解package.json！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。