package.json文件是許多基於Node.js生態系統的應用代碼庫中的關鍵元素。
如果您使用JavaScript,或者曾經與JavaScript項目,Node.js或前端項目進行過交互,那麼您肯定會遇到package.json
文件。
那個有什麼用途?您應該了解什麼,可以使用它完成哪些有趣的事情?
這package.json
文件是您項目的清單。它可以做很多事情,完全不相關。例如,它是工具配置的中央存儲庫。這也是npm
和yarn
存儲其安裝的軟件包的名稱和版本。
文件結構
這是一個示例package.json文件:
{
}
它是空的!沒有什麼要求應該有固定的要求package.json
文件,用於應用程序。唯一的要求是,它必須遵循JSON格式,否則,嘗試以編程方式訪問其屬性的程序將無法讀取該格式。
如果您要構建要分發的Node.js程序包npm
事情發生了根本性的變化,您必須具有一組可以幫助其他人使用它的屬性。我們將在以後看到更多有關此的內容。
這是另一個package.json:
{
"name": "test-project"
}
它定義了一個name
屬性,告訴應用程序或程序包的名稱,該屬性包含在該文件所在的同一文件夾中。
這是一個更為複雜的示例,我從示例Vue.js應用程序中提取了此示例:
{
"name": "test-project",
"version": "1.0.0",
"description": "A Vue.js project",
"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
定義了一組可以運行的節點腳本dependencies
設置一個列表npm
軟件包作為依賴安裝devDependencies
設置一個列表npm
軟件包安裝為開發依賴項engines
設置此程序包/應用程序在哪個版本的Node上運行browserslist
用於告訴您要支持哪些瀏覽器(及其版本)
所有這些屬性都被其中一個使用npm
或我們可以使用的其他工具。
屬性細目
本節描述了可以詳細使用的屬性。我指的是“軟件包”,但同樣的情況適用於您不用作軟件包的本地應用程序。
其中大多數屬性僅用於https://www.npmjs.com/,其他通過與您的代碼進行交互的腳本進行,例如npm
或其他。
name
設置程序包名稱。
例子:
"name": "test-project"
名稱必須少於214個字符,不能包含空格,只能包含小寫字母,連字符(-
)或下劃線(_
)。
這是因為在發佈軟件包時npm
,它會基於此屬性獲取自己的URL。
如果您在GitHub上公開發布了此軟件包,則此屬性的一個不錯的選擇就是GitHub存儲庫名稱。
author
列出軟件包作者名稱
例子:
{
"author": "Flavio Copes <[email protected]> (https://flaviocopes.com)"
}
也可以使用以下格式:
{
"author": {
"name": "Flavio Copes",
"email": "[email protected]",
"url": "https://flaviocopes.com"
}
}
contributors
除作者外,該項目可以有一個或多個貢獻者。此屬性是列出它們的數組。
例子:
{
"contributors": [
"Flavio Copes <[email protected]> (https://flaviocopes.com)"
]
}
也可以使用以下格式:
{
"contributors": [
{
"name": "Flavio Copes",
"email": "[email protected]",
"url": "https://flaviocopes.com"
}
]
}
bugs
鏈接到軟件包問題跟踪器,最有可能是GitHub問題頁面
例子:
{
"bugs": "https://github.com/flaviocopes/package/issues"
}
homepage
設置程序包主頁
例子:
{
"homepage": "https://flaviocopes.com/package"
}
version
指示軟件包的當前版本。
例子:
"version": "1.0.0"
此屬性遵循版本的語義版本(符號)表示法,這意味著版本始終以3個數字表示:x.x.x
。
第一個數字是主要版本,第二個數字是次要版本,第三個數字是補丁程序版本。
這些數字中有一個含義:僅修正錯誤的發行版是補丁發行版,引入向後兼容更改的發行版是次要發行版,主要發行版可能具有重大更改。
license
指示軟件包的許可證。
例子:
"license": "MIT"
keywords
此屬性包含與包的功能相關聯的關鍵字數組。
例子:
"keywords": [
"email",
"machine learning",
"ai"
]
這可以幫助人們在瀏覽相似的軟件包或瀏覽類似的軟件包時找到您的軟件包https://www.npmjs.com/網站。
description
該屬性包含對軟件包的簡短描述
例子:
"description": "A package to work with strings"
如果您決定將軟件包發佈到npm
這樣人們就可以了解包裝的內容。
repository
此屬性指定此程序包存儲庫所在的位置。
例子:
"repository": "github:flaviocopes/testing",
注意github
字首。其他受歡迎的服務還包括:
"repository": "gitlab:flaviocopes/testing",
"repository": "bitbucket:flaviocopes/testing",
您可以顯式設置版本控制系統:
"repository": {
"type": "git",
"url": "https://github.com/flaviocopes/testing.git"
}
您可以使用不同的版本控制系統:
"repository": {
"type": "svn",
"url": "..."
}
main
設置包的入口點。
在應用程序中導入此程序包時,應用程序將在該位置搜索模塊導出。
例子:
"main": "src/main.js"
private
如果設置為true
防止應用/軟件包被意外發佈到npm
例子:
"private": true
scripts
定義一組可以運行的節點腳本
例子:
"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"
}
這些腳本是命令行應用程序。您可以通過調用來運行它們npm run XXXX
或者yarn XXXX
, 在哪裡XXXX
是命令名稱。例子:npm run dev
。
您可以為命令使用任何名稱,腳本可以執行任何您想要的操作。
dependencies
設置清單npm
軟件包作為依賴項安裝。
使用npm或yarn安裝軟件包時:
npm install <PACKAGENAME>
yarn add <PACKAGENAME>
該軟件包將自動插入此列表中。
例子:
"dependencies": {
"vue": "^2.5.2"
}
devDependencies
設置清單npm
作為開發依賴項安裝的軟件包。
他們不同於dependencies
因為它們只能安裝在開發機器上,而無需在生產環境中運行代碼。
使用npm或yarn安裝軟件包時:
npm install --dev <PACKAGENAME>
yarn add --dev <PACKAGENAME>
該軟件包將自動插入此列表中。
例子:
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1"
}
engines
設置此程序包/應用程序可以處理哪些版本的Node.js和其他命令
例子:
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0",
"yarn": "^0.13.0"
}
browserslist
用於告訴您要支持哪些瀏覽器(及其版本)。 Babel,Autoprefixer和其他工具引用了它,僅將所需的polyfill和fallback添加到目標瀏覽器中。
例子:
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
此配置表示您希望使用至少1%的使用率來支持所有瀏覽器的最後2個主要版本(從CanIUse.com統計信息),但IE8及更低版本除外。
(看更多)
特定於命令的屬性
這package.json
文件還可以託管特定於命令的配置,例如Babel,ESLint等。
每個都有特定的屬性,例如eslintConfig
,babel
和別的。這些是特定於命令的,您可以在相應的命令/項目文檔中找到如何使用它們。
套件版本
您已經在上面的描述中看到了類似以下的版本號:~3.0.0
或者^0.13.0
。它們是什麼意思,您還可以使用哪些其他版本說明符?
該符號指定您的軟件包從該依賴項接受哪些更新。
鑑於使用semver(語義版本控制),所有版本都有3位數字,第一個是主要發行版,第二個是次要發行版,第三個是補丁發行版,您具有以下規則:
~
:如果您寫~0.13.0
,您只想更新補丁程序版本:0.13.1
可以,但是0.14.0
不是。^
:如果您寫^0.13.0
,您要更新補丁程序和次要版本:0.13.1
,0.14.0
等等。*
:如果您寫*
,則表示您接受所有更新,包括主要版本升級。>
:您接受比您指定的版本更高的任何版本>=
:您接受等於或高於您指定的版本的任何版本<=
:您接受等於或低於您指定的版本的任何版本<
:您接受低於指定版本的任何版本
還有其他規則:
- 無符號:您僅接受指定的特定版本
latest
:您想使用可用的最新版本
並且您可以將上述大多數內容組合在範圍內,如下所示:1.0.0 || >=1.1.0 <1.2.0
,以使用1.0.0或從1.1.0起但低於1.2.0的一個發行版。
免費下載我的Node.js手冊
更多節點教程:
- npm軟件包管理器簡介
- Node.js簡介
- 使用Axios的HTTP請求
- 在何處託管Node.js應用
- 使用Node.js與Google Analytics(分析)API進行交互
- npx節點包運行器
- package.json指南
- npm在哪里安裝軟件包?
- 如何更新Node.js
- 如何使用或執行使用npm安裝的軟件包
- package-lock.json文件
- 使用npm的語義版本控制
- 您是否應該將node_modules文件夾提交到Git?
- 將所有Node依賴項更新到最新版本
- 使用Node.js解析JSON
- 查找npm軟件包的安裝版本
- Node.js流
- 安裝較舊版本的npm軟件包
- 在Node中獲取當前文件夾
- 如何在Node中記錄對象
- 使用導出從Node文件公開功能
- 節點和瀏覽器之間的區別
- 使用Node發出HTTP POST請求
- 使用Node獲取HTTP請求主體數據
- 節點緩衝區
- Node.js的簡要歷史
- 如何安裝Node.js
- 使用Node您需要知道多少JavaScript?
- 如何使用Node.js REPL
- 節點,從命令行接受參數
- 使用Node輸出到命令行
- 接受來自Node中命令行的輸入
- 使用`npm uninstall`來卸載npm軟件包。
- npm全局或本地軟件包
- npm依賴項和devDependencies
- Node.js事件循環
- 了解process.nextTick()
- 了解setImmediate()
- 節點事件發射器
- 建立一個HTTP服務器
- 使用Node發出HTTP請求
- Node fs模塊
- 使用Axios的Node中的HTTP請求
- 使用Node讀取文件
- 節點文件路徑
- 用Node寫入文件
- 節點文件統計
- 在Node中使用文件描述符
- 在Node中使用文件夾
- 節點路徑模塊
- Node http模塊
- 將WebSockets與Node.js結合使用
- 使用MySQL和Node的基礎知識
- Node.js中的錯誤處理
- 哈巴狗指南
- 如何從Node.js讀取環境變量
- 如何從Node.js程序退出
- Node os模塊
- 節點事件模塊
- 節點,開發與生產之間的區別
- 如何檢查Node.js中是否存在文件
- 如何在Node.js中創建一個空文件
- 如何使用Node.js刪除文件
- 如何使用Node.js獲取文件的最後更新日期
- 如何在JavaScript中確定日期是否為今天
- 如何將JSON對象寫入Node.js中的文件
- 為什麼要在下一個項目中使用Node.js?
- 從任何文件夾運行Web服務器
- 如何將MongoDB與Node.js結合使用
- 使用Chrome DevTools調試Node.js應用
- 什麼是pnpm?
- Node.js運行時v8選項列表
- 使用npm時如何解決“缺少寫訪問權限”錯誤
- 如何在Node.js中啟用ES模塊
- 如何使用Node.js生成子進程
- 如何在Express中同時獲取已解析的正文和原始正文
- 如何在Node.js中處理文件上傳
- 節點模塊中的對等依賴性是什麼?
- 如何使用Node.js編寫CSV文件
- 如何使用Node.js讀取CSV文件
- 節點核心模塊
- 使用Node.js一次增加多個文件夾的數量
- 如何將畫布打印到數據URL
- 如何使用Node.js和Canvas創建和保存圖像
- 如何使用Node.js下載圖像
- 如何在Node.js中批量重命名文件
- 如何獲取Node中文件夾中所有文件的名稱
- 如何使用Promise和基於Node.js回調的等待功能
- 如何在本地測試NPM軟件包
- 如何在運行時檢查當前的Node.js版本
- 如何使用Sequelize與PostgreSQL交互
- 使用Node.js服務HTML頁面
- 如何解決Node.js中的util.pump不是函數錯誤