大家好，我是紙飛機，想必大家都在專案中經常看見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拓展名，不是的話需要顯示宣告書寫）
- 絕對路徑
- 相對路徑
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/298394.html
標籤：其他
下一篇：cgb2107-day10