1. 概述
如果使用 JavaScript、或者曾經與 JavaScript 項目、Node.js 或前端項目進行過交互，則肯定會遇到過 package.json 文件。
它有什么用途？應該了解它的什么，可以使用它完成哪些有趣的事情？
package.json 文件是項目的清單。 它可以做很多完全互不相關的事情。 例如，它是用于工具的配置中心。 它也是 npm 和 yarn 存儲所有已安裝軟件包的名稱和版本的地方。
對于應用程序，package.json 文件中的內容沒有固定的要求。 唯一的要求是必須遵守 JSON 格式，否則，嘗試以編程的方式訪問其屬性的程序則無法讀取它。
如果要構建要在 npm 上分發的 Node.js 軟件包，則必須具有一組可幫助其他人使用它的屬性。
2.解析說明
{
"name": "example-project",
"version": "1.0.0",
"description": "package.json解析",
"main": "src/main.js",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"test": "npm run unit",
"lint": "eslint --ext .js,.vue src test/unit",
"build": "node build/build.js"
},
"dependencies": {
"vue": "^2.5.2"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-jest": "^21.0.2",
"babel-loader": "^7.1.1",
"babel-plugin-dynamic-import-node": "^1.2.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-config-airbnb-base": "^11.3.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-import-resolver-webpack": "^0.8.3",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-vue": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"jest": "^22.0.4",
"jest-serializer-vue": "^0.3.0",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-jest": "^1.0.2",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": ["> 1%", "last 2 versions", "not ie <= 8"]
}
這里有很多東西：
- name 設置了應用程序/軟件包的名稱。
- version 表明了當前的版本。
- description 是應用程序/軟件包的簡短描述。
- main 設置了應用程序的入口點。
- private 如果設置為 true，則可以防止應用程序/軟件包被意外地發布到 npm。
- scripts 定義了一組可以運行的 node 腳本。
- dependencies 設置了作為依賴安裝的 npm 軟件包的列表。
- devDependencies 設置了作為開發依賴安裝的 npm 軟件包的列表。
- engines 設置了此軟件包/應用程序在哪個版本的 Node.js 上運行。
- browserslist 用于告知要支持哪些瀏覽器（及其版本）。
以上所有的這些屬性都可被 npm 或其他工具使用
1. name字段
package.json文件中最重要的就是name和version字段，這兩項是必填的。名稱和版本一起構成一個標識符，該標識符被認為是完全唯一的。對包的更改應該與對版本的更改一起進行。
name必須小于等于214個字符，不能以.或_開頭，不能有大寫字母，因為名稱最終成為URL的一部分因此不能包含任何非URL安全字符。
npm官方建議我們不要使用與核心節點模塊相同的名稱。不要在名稱中加js或node。如果需要可以使用engines來指定運行環境。
該名稱會作為參數傳遞給require，因此它應該是簡短的，但也需要具有合理的描述性
2.version字段
version一般的格式是x.x.x, 并且需要遵循該規則。
package.json文件中最重要的就是name和version字段，這兩項是必填的。名稱和版本一起構成一個標識符，該標識符被認為是完全唯一的。每次發布時version不能與已存在的一致。
- description字段
description是一個字符串，用于編寫描述信息。有助于人們在npm庫中搜索的時候發現你的模塊。 - keywords字段
keywords是一個字符串組成的數組，有助于人們在npm庫中搜索的時候發現你的模塊。 - homepage字段
homepage項目的主頁地址。 - bugs字段
bugs用于項目問題的反饋issue地址或者一個郵箱。
"bugs": {
"url" : "https://github.com/owner/project/issues",
"email" : "project@hostname.com"
}
復制代碼 - license字段
license是當前項目的協議，讓用戶知道他們有何權限來使用你的模塊，以及使用該模塊有哪些限制。
"license" : "BSD-3-Clause"
復制代碼 - author字段 contributors字段
author是具體一個人，contributors表示一群人，他們都表示當前項目的共享者。同時每個人都是一個對象。具有name字段和可選的url及email字段。
"author": {
"name" : "yindong",
"email" : "yindong@xx.com",
"url" : "https://zhiqianduan.com/"
}
復制代碼
也可以寫成一個字符串
"author": "yindong yindong@xx.com (https://zhiqianduan.com/)"
復制代碼 - files字段
files屬性的值是一個數組，內容是模塊下文件名或者文件夾名，如果是文件夾名，則文件夾下所有的文件也會被包含進來（除非文件被另一些配置排除了）
可以在模塊根目錄下創建一個.npmignore文件，寫在這個文件里邊的文件即便被寫在files屬性里邊也會被排除在外，這個文件的寫法與.gitignore類似。 - main字段
main字段指定了加載的入口文件，require導入的時候就會加載這個文件。這個字段的默認值是模塊根目錄下面的index.js。 - bin字段
bin項用來指定每個內部命令對應的可執行文件的位置。如果你編寫的是一個node工具的時候一定會用到bin字段。
當我們編寫一個cli工具的時候，需要指定工具的運行命令，比如常用的webpack模塊，他的運行命令就是webpack。
"bin": {
"webpack": "bin/index.js",
}
復制代碼
當我們執行webpack命令的時候就會執行bin/index.js文件中的代碼。
在模塊以依賴的方式被安裝，如果存在bin選項。在node_modules/.bin/生成對應的文件，
Npm會尋找這個文件，在node_modules/.bin/目錄下建立符號鏈接。由于node_modules/.bin/目錄會在運行時加入系統的PATH變量，因此在運行npm時，就可以不帶路徑，直接通過命令來調用這些腳本。
所有node_modules/.bin/目錄下的命令，都可以用npm run [命令]的格式運行。在命令行下，鍵入npm run，然后按tab鍵，就會顯示所有可以使用的命令。 - man字段
man用來指定當前模塊的man文檔的位置。
"man" :[ "./doc/calc.1" ]
復制代碼 - directories字段
directories制定一些方法來描述模塊的結構, 用于告訴用戶每個目錄在什么位置。 - repository字段
指定一個代碼存放地址，對想要為你的項目貢獻代碼的人有幫助
"repository" : {
"type" : "git",
"url" : "https://github.com/npm/npm.git"
}
復制代碼 - scripts字段
scripts指定了運行腳本命令的npm命令行縮寫，比如start指定了運行npm run start時，所要執行的命令。
"scripts": {
"start": "node ./start.js"
}
復制代碼
使用scripts字段可以快速的執行shell命令，可以理解為alias。
scripts可以直接使用node_modules中安裝的模塊，這區別于直接運行需要使用npx命令。
"scripts": {
"build": "webpack"
}
// npm run build
// npx webpack
復制代碼
- config字段
config字段用于添加命令行的環境變量。
{
"name" : "yindong",
"config" : { "port" : "8080" },
"scripts" : { "start" : "node server.js" }
}
復制代碼
然后，在server.js腳本就可以引用config字段的值。
console.log(process.env.npm_package_config_port); // 8080
復制代碼
用戶可以通過npm config set來修改這個值。
npm config set yindong:port 8000
復制代碼 - dependencies字段, devDependencies字段
dependencies字段指定了項目運行所依賴的模塊，devDependencies指定項目開發所需要的模塊。
它們的值都是一個對象。該對象的各個成員，分別由模塊名和對應的版本要求組成，表示依賴的模塊及其版本范圍。
當安裝依賴的時候使用--save參數表示將該模塊寫入dependencies屬性，--save-dev表示將該模塊寫入devDependencies屬性。
"devDependencies": {
"webpack": "^5.38.1",
}
復制代碼
對象的每一項通過一個鍵值對表示，前面是模塊名稱，后面是對應模塊的版本號。版本號遵循“大版本.次要版本.小版本”的格式規定。
版本說明
固定版本: 比如5.38.1，安裝時只安裝指定版本。
波浪號: 比如~5.38.1, 表示安裝5.38.x的最新版本（不低于5.38.1），但是不安裝5.39.x，也就是說安裝時不改變大版本號和次要版本號。
插入號: 比如?5.38.1, ，表示安裝5.x.x的最新版本（不低于5.38.1），但是不安裝6.x.x，也就是說安裝時不改變大版本號。需要注意的是，如果大版本號為0，則插入號的行為與波浪號相同，這是因為此時處于開發階段，即使是次要版本號變動，也可能帶來程序的不兼容。
latest: 安裝最新版本。
- peerDependencies字段
當我們開發一個模塊的時候，如果當前模塊與所依賴的模塊同時依賴一個第三方模塊，并且依賴的是兩個不兼容的版本時就會出現問題。
比如，你的項目依賴A模塊和B模塊的1.0版，而A模塊本身又依賴B模塊的2.0版。
大多數情況下，這不構成問題，B模塊的兩個版本可以并存，同時運行。但是，有一種情況，會出現問題，就是這種依賴關系將暴露給用戶。
最典型的場景就是插件，比如A模塊是B模塊的插件。用戶安裝的B模塊是1.0版本，但是A插件只能和2.0版本的B模塊一起使用。這時，用戶要是將1.0版本的B的實例傳給A，就會出現問題。因此，需要一種機制，在模板安裝的時候提醒用戶，如果A和B一起安裝，那么B必須是2.0模塊。
peerDependencies字段，就是用來供插件指定其所需要的主工具的版本。可以通過peerDependencies字段來限制，使用myless模塊必須依賴less模塊的3.9.x版本.
{
"name": "myless",
"peerDependencies": {
"less": "3.9.x"
}
}
復制代碼
注意，從npm 3.0版開始，peerDependencies不再會默認安裝了。就是初始化的時候不會默認帶出。 - bundledDependencies字段
bundledDependencies指定發布的時候會被一起打包的模塊. - optionalDependencies字段
如果一個依賴模塊可以被使用， 同時你也希望在該模塊找不到或無法獲取時npm繼續運行，你可以把這個模塊依賴放到optionalDependencies配置中。這個配置的寫法和dependencies的寫法一樣，不同的是這里邊寫的模塊安裝失敗不會導致npm install失敗。 - engines字段
engines字段指明了該模塊運行的平臺，比如Node或者npm的某個版本或者瀏覽器。
{ "engines" : { "node" : ">=0.10.3 <0.12", "npm" : "~1.0.20" } }
復制代碼 - os字段
可以指定你的模塊只能在哪個操作系統上運行
"os" : [ "darwin", "linux", "win32" ]
復制代碼 - cpu字段
限制模塊只能在某種架構的cpu下運行
"cpu" : [ "x64", "ia32" ]
復制代碼 - private字段
如果這個屬性被設置為true，npm將拒絕發布它，這是為了防止一個私有模塊被無意間發布出去。
"private": true
復制代碼 - publishConfig字段
這個配置是會在模塊發布時生效，用于設置發布用到的一些值的集合。如果你不想模塊被默認標記為最新的，或者默認發布到公共倉庫，可以在這里配置tag或倉庫地址。
通常publishConfig會配合private來使用，如果你只想讓模塊被發布到一個特定的npm倉庫，如一個內部的倉庫。
"private": true,
"publishConfig": {
"tag": "1.0.0",
"registry": "https://registry.npmjs.org/",
"access": "public"
}
復制代碼 - preferGlobal字段
preferGlobal的值是布爾值，表示當用戶不將該模塊安裝為全局模塊時（即不用–global參數），要不要顯示警告，表示該模塊的本意就是安裝為全局模塊。
"preferGlobal": false
復制代碼 - browser字段
browser指定該模板供瀏覽器使用的版本。Browserify這樣的瀏覽器打包工具，通過它就知道該打包那個文件。
"browser": {
"tipso": "./node_modules/tipso/src/tipso.js"
},
