package.json中homepage屬性的作用詳解
Package.json 屬性說(shuō)明
- name - 包名。
- version - 包的版本號(hào)。
- description - 包的描述。
- homepage - 包的官網(wǎng) url 。
- author - 包的作者姓名。
- contributors - 包的其他貢獻(xiàn)者姓名。
- dependencies - 依賴包列表。如果依賴包沒(méi)有安裝，npm 會(huì)自動(dòng)將依賴包安裝在 node_module 目錄下。
- repository - 包代碼存放的地方的類型，可以是 git 或 svn，git 可在 Github 上。
- main - main 字段指定了程序的主入口文件，require('moduleName') 就會(huì)加載這個(gè)文件。這個(gè)字段的默認(rèn)值是模塊根目錄下面的 index.js。
- keywords - 關(guān)鍵字
做前端開(kāi)發(fā)的同學(xué)對(duì) package.json 文件一定不陌生，但我們通常很少去關(guān)注它，最熟悉的莫過(guò)于幾個(gè)最基本的屬性，如：
- name，項(xiàng)目名稱
- version，項(xiàng)目版本號(hào)
- dependencies，項(xiàng)目依賴包
- scripts，npm命令
package.json 其實(shí)還有很多屬性可以配置的，這里就介紹一個(gè) homepage 屬性的作用。
homepage 的作用是設(shè)置應(yīng)用的跟路徑，我們的項(xiàng)目打包后是要運(yùn)行在一個(gè)域名之下的，有時(shí)候可能是運(yùn)行在跟域名下，也有可能運(yùn)行在某個(gè)子域名下或或域名的某個(gè)目錄下，這時(shí)候我們就需要讓我們的應(yīng)用知道去哪里加載資源，這時(shí)候就需要我們?cè)O(shè)置一個(gè)跟路徑，而且有時(shí)候我們的資源會(huì)部署在 CDN 上，你必須告訴打包工具你的CDN地址是什么。
比如我們用 create-react-app 開(kāi)發(fā)的 React 應(yīng)用，以及 Vue CLI 開(kāi)發(fā)的項(xiàng)目，默認(rèn)是繼承了 webpack 的，當(dāng)不配置 homepage 屬性，build 打包之后的文件資源應(yīng)用路徑默認(rèn)是 / ，如下圖
當(dāng)你設(shè)置了 homepage 屬性后，比如我這里homepage 設(shè)置為 github 的 pages 服務(wù)地址
打包后的資源路徑就會(huì)加上 homepage 的地址。比如上面圖片配置好 homepage 之后我打包一個(gè) React 項(xiàng)目，打包后 index.html 頁(yè)面的資源路徑就是：
到此這篇關(guān)于package.json中homepage屬性的作用詳解的文章就介紹到這了,更多相關(guān)package.json homepage屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript處理XML DOM、XPath和XSLT方法詳解
這篇文章介紹了JavaScript處理XML DOM、XPath和XSLT的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-05-05
用canvas 實(shí)現(xiàn)個(gè)圖片三角化（LOW POLY）效果
這篇文章主要介紹了用canvas 實(shí)現(xiàn)個(gè)圖片三角化（LOW POLY）效果 的相關(guān)資料,需要的朋友可以參考下2016-02-02
遍歷子節(jié)點(diǎn)子元素的方法有很多，本例使用js來(lái)實(shí)現(xiàn)，另附示例代碼及屬性方法，需要的朋友可以參考下2014-08-08
JavaScript中運(yùn)算符與數(shù)組擴(kuò)展詳細(xì)講解
這篇文章主要介紹了JavaScript中運(yùn)算符與數(shù)組擴(kuò)展方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-11-11
JS實(shí)現(xiàn)圖片幻燈片效果代碼實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)圖片幻燈片效果代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
命名空間是通過(guò)為項(xiàng)目或庫(kù)創(chuàng)建一個(gè)全局對(duì)象，然后將所有功能添加到該全局變量中。通過(guò)減少程序中全局變量的數(shù)量，實(shí)現(xiàn)單全局變量，從而在具有大量函數(shù)、對(duì)象和其他變量的情況下不會(huì)造成全局污染，同時(shí)也避免了命名沖突等問(wèn)題2013-11-11
React Hook 是 React 16.8 版本引入的一項(xiàng)新特性，它能夠讓函數(shù)組件擁有類組件中的狀態(tài)(state)和生命周期方法(lifecycle methods)等功能。Vue 3.x 開(kāi)始引入了 Hooks API，用于在函數(shù)式組件中實(shí)現(xiàn)狀態(tài)和生命周期的管理。本文介紹的非常詳細(xì)，需要的朋友可以參考下2023-04-04
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)電商商品展示放大鏡特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
本文主要介紹了js實(shí)現(xiàn)拖拽效果的實(shí)例，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-03-03
JavaScript中檢查對(duì)象property的存在性方法介紹
這篇文章主要介紹了JavaScript中檢查對(duì)象property的存在性方法介紹,本文講解了4種方法來(lái)檢查某個(gè)對(duì)象o是否擁有property x,需要的朋友可以參考下2014-12-12