目錄

前言

一、package.json 文件作用

二、package.json 文件創建

三、package.json 文件示例

四、package.json 文件配置說明

前言

隨著前端由多頁面到單頁面，由零散的文件到模塊化開發，在一個完整的項目中，package.json 文件無處不在。首先，在項目根目錄會有，其次在 node_modules 中也頻現。那么這個文件到底是干嘛的，又有什么作用，今天給大家揭曉。

一、package.json 文件作用

package.json 文件其實就是對項目或者模塊包的描述，里面包含許多元信息。比如項目名稱，項目版本，項目執行入口文件，項目貢獻者等等。npm install 命令會根據這個文件下載所有依賴模塊。

二、package.json 文件創建

package.json 文件創建有兩種方式，手動創建或者自動創建。

• 手動創建
  直接在項目根目錄新建一個 package.json 文件，然后輸入相關的內容。
• 自動創建
  也是在項目根目錄下執行 npm init，然后根據提示一步步輸入相應的內容完成后即可自動創建。

三、package.json 文件示例

{"name": "exchange","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"] }

四、package.json 文件配置說明

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：被項目包含的文件名數組。

原文鏈接：https://blog.csdn.net/weixin_44135121/article/details/91674772

總結

以上是生活随笔為你收集整理的package.json文件详解的全部內容，希望文章能夠幫你解決所遇到的問題。

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