1. 程式人生 > 程式設計 >package.json中homepage屬性的作用詳解

package.json中homepage屬性的作用詳解

Package.json 屬性說明

  • name - 包名。
  • version - 包的版本號。
  • description - 包的描述。
  • homepage - 包的官網 url 。
  • author - 包的作者姓名。
  • contributors - 包的其他貢獻者姓名。
  • dependencies - 依賴包列表。如果依賴包沒有安裝,npm 會自動將依賴包安裝在 node_module 目錄下。
  • repository - 包程式碼存放的地方的型別,可以是 git 或 svn,git 可在 Github 上。
  • main - main 欄位指定了程式的主入口檔案,require('moduleName') 就會載入這個檔案。這個欄位的預設值是模組根目錄下面的 index.js。
  • keywords - 關鍵字

做前端開發的同學對 package.json 檔案一定不陌生,但我們通常很少去關注它,最熟悉的莫過於幾個最基本的屬性,如:

  1. name,專案名稱
  2. version,專案版本號
  3. dependencies,專案依賴包
  4. scripts,npm命令

package.json 其實還有很多屬性可以配置的,這裡就介紹一個 homepage 屬性的作用。

homepage 的作用是設定應用的跟路徑,我們的專案打包後是要執行在一個域名之下的,有時候可能是執行在跟域名下,也有可能執行在某個子域名下或或域名的某個目錄下,這時候我們就需要讓我們的應用知道去哪裡載入資源,這時候就需要我們設定一個跟路徑,而且有時候我們的資源會部署在 CDN 上,你必須告訴打包工具你的CDN地址是什麼。

比如我們用 create-react-app 開發的 React 應用,以及 Vue CLI 開發的專案,預設是繼承了 webpack 的,當不配置 homepage 屬性,build 打包之後的檔案資源應用路徑預設是 / ,如下圖

package.json中homepage屬性的作用詳解

當你設定了 homepage 屬性後,比如我這裡homepage 設定為 github 的 pages 服務地址

package.json中homepage屬性的作用詳解

打包後的資源路徑就會加上 homepage 的地址。比如上面圖片配置好 homepage 之後我打包一個 React 專案,打包後 index.html 頁面的資源路徑就是:

package.json中homepage屬性的作用詳解

到此這篇關於package.json中homepage屬性的作用詳解的文章就介紹到這了,更多相關package.json homepage屬性內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!