目錄

前言

一、package.json 文件作用

二、package.json 文件創(chuàng)建

三、package.json 文件示例

四、package.json 文件配置說明

前言

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

一、package.json 文件作用

package.json 文件其實(shí)就是對項(xiàng)目或者模塊包的描述，里面包含許多元信息。比如項(xiàng)目名稱，項(xiàng)目版本，項(xiàng)目執(zhí)行入口文件，項(xiàng)目貢獻(xiàn)者等等。npm install 命令會(huì)根據(jù)這個(gè)文件下載所有依賴模塊。

二、package.json 文件創(chuàng)建

package.json 文件創(chuàng)建有兩種方式，手動(dòng)創(chuàng)建或者自動(dòng)創(chuàng)建。

• 手動(dòng)創(chuàng)建
  直接在項(xiàng)目根目錄新建一個(gè) package.json 文件，然后輸入相關(guān)的內(nèi)容。
• 自動(dòng)創(chuàng)建
  也是在項(xiàng)目根目錄下執(zhí)行 npm init，然后根據(jù)提示一步步輸入相應(yīng)的內(nèi)容完成后即可自動(dòng)創(chuàng)建。

三、package.json 文件示例

{"name": "exchange","version": "0.1.0","author": "zhangsan <zhangsan@163.com>","description": "第一個(gè)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：項(xiàng)目/模塊名稱，長度必須小于等于214個(gè)字符，不能以"."(點(diǎn))或者"_"(下劃線)開頭，不能包含大寫字母。

version：項(xiàng)目版本。

author：項(xiàng)目開發(fā)者，它的值是你在https://npmjs.org網(wǎng)站的有效賬戶名，遵循“賬戶名<郵件>”的規(guī)則，例如：zhangsan zhangsan@163.com。

description：項(xiàng)目描述，是一個(gè)字符串。它可以幫助人們在使用npm search時(shí)找到這個(gè)包。

keywords：項(xiàng)目關(guān)鍵字，是一個(gè)字符串?dāng)?shù)組。它可以幫助人們在使用npm search時(shí)找到這個(gè)包。

private：是否私有，設(shè)置為 true 時(shí)，npm 拒絕發(fā)布。

license：軟件授權(quán)條款，讓用戶知道他們的使用權(quán)利和限制。

bugs：bug 提交地址。

contributors：項(xiàng)目貢獻(xiàn)者 。

repository：項(xiàng)目倉庫地址。

homepage：項(xiàng)目包的官網(wǎng) URL。

dependencies：生產(chǎn)環(huán)境下，項(xiàng)目運(yùn)行所需依賴。

devDependencies：開發(fā)環(huán)境下，項(xiàng)目所需依賴。

scripts：執(zhí)行 npm 腳本命令簡寫，比如 “start”: “react-scripts start”, 執(zhí)行 npm
start 就是運(yùn)行 “react-scripts start”。

bin：內(nèi)部命令對應(yīng)的可執(zhí)行文件的路徑。

main：項(xiàng)目默認(rèn)執(zhí)行文件，比如 require(‘webpack’)；就會(huì)默認(rèn)加載 lib 目錄下的 webpack.js
文件，如果沒有設(shè)置，則默認(rèn)加載項(xiàng)目跟目錄下的 index.js 文件。

module：是以 ES Module(也就是 ES6)模塊化方式進(jìn)行加載，因?yàn)樵缙跊]有 ES6 模塊化方案時(shí)，都是遵循CommonJS 規(guī)范，而 CommonJS 規(guī)范的包是以 main 的方式表示入口文件的，為了區(qū)分就新增了 module 方式，但是 ES6 模塊化方案效率更高，所以會(huì)優(yōu)先查看是否有 module 字段，沒有才使用 main 字段。

eslintConfig：EsLint 檢查文件配置，自動(dòng)讀取驗(yàn)證。

engines：項(xiàng)目運(yùn)行的平臺。

browserslist：供瀏覽器使用的版本列表。

style：供瀏覽器使用時(shí)，樣式文件所在的位置；樣式文件打包工具parcelify，通過它知道樣式文件的打包位置。

files：被項(xiàng)目包含的文件名數(shù)組。

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。