摘要:字段由腳本命令組成的字典,這些命令運行在包的各個生命周期中。在打包過程中,如果遇到字段會優先使用字段表示的路徑下的文件,如果不存在,則用字段表示的作為入口,并按照的規范打包。其中還分析了文件中字段和字段的不同以及和兩個字段的區別。
所有用npm下載的包或者要上傳至npm的模塊都會有一個package.json文件,這個文件總是存在于模塊(或者包)的根目錄下,這個文件到底是干嘛的,現在就來做一個簡要說明。
1.package.json是什么package.json是對下載的包或模塊的描述信息,如果你要上傳包到npm服務器也要有對應的模塊說明。說明包括項目名稱、版本、作者等等。package.json必須是一個嚴格的json格式,也就是說每一個字段都要使用雙引號,不論是key值還是value值。
2.package.json字段說明如果你要在npm上發布你的包,則package.json必須要有兩個字段:name和version。其中name是包的名稱,version是版本,對于這兩個字段會有些約束。
name:
1)名稱不能超過214個字符
2)名稱不能以點或者下劃線開頭
3)包的名稱中不能包含大寫字母
4)此名稱將會成為URL的一部分,因此不能包含非URL的字符
version:
1)版本號由主版本.此版本.補丁版本組成
2)版本必須要由node-semver解析,它與npm捆綁在一起作為依賴項。
除了這兩個字段外,還有其他對應的描述信息,下面對常用的字段做一個說明。
description和keyword字段:這兩個都是對應的描述信息,使用兩個字段其中的某些內容進行搜索,可以在npm官網搜索到相關的包。不過這兩個也有他們的區別,前者對應一個字符串,是對項目的一個簡要說明,可以是一段描述的語句。而后者是一個字符串數組,就像寫論文開頭的關鍵字,我們可以看一下vue項目的package.json,他里面的description和keyword如下:
"description": "Reactive, component-oriented view layer for modern web interfaces.", "keyword": [ "vue" ]
可以看出,keyword字段必須是一個數組,即使數組中只有一個成員。另外,數組的成員要使用雙引號,而數組的[]表示不需要雙引號。
author字段:作者
homePage字段:該包的官網地址
main字段:字段指定了程序的主入口文件,使用遵循CommonJS規范的require("moduleName")就會加載main字段指定的目錄下的文件。這個字段的默認值是模塊根目錄下面的index.js,也就是說如果不指定main字段,在其他模塊引用此模塊會默認加載根目錄下的index.js文件。
module字段:此字段指定了使用ES6的module模塊引入該模塊時加載的文件路徑,即使用import "xx" from "./xx"所指定的路徑。關于main字段和module字段的區別會在下面講。
dependencies字段和devDependencies字段:這兩個字段表示項目的依賴,前者表示項目正常運行(生產環境)時需要的依賴,后者指開發(開發環境)時所需要的依賴。開發環境和生產環境后面會做說明。這兩個字段都是一個對象,對象的成員又指定的模塊和對應的版本組成,表示依賴的模塊和版本范圍,注意是版本范圍。
scripts字段:由腳本命令組成的字典,這些命令運行在包的各個生命周期中。這里的鍵是生命周期事件名,值是要運行的命令。比如下面的字段:
"script": { "install": "scripts/install.js", "postinstall" : "scripts/install.js", "uninstall" : "scripts/uninstall.js", "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "build": "node build/build.js" }
比如上面的install,在安裝npm包時就應用后面的命令,即npm install會運行"script/install.js"命令。上面前三個是npm安裝的生命周期,后面的幾個就是自定義的命令了,比如使用npm run build運行build后面的命令。
engine字段:表示你的項目所運行的node版本。不指定engine字段,或者用*表示不限制node版本。
3.main字段和module字段要理解main字段和module字段的不同要先明白Tree-Shaking的機制,簡單來講,Tree-Shaking的作用是將沒有用到的代碼全部過濾掉,但是在使用main字段作為入口導入的文件是遵循CommonJS規范的,也就是說暴露出的代碼是作為export對象的一個屬性,舉例來講,如果暴露出一個add的方法作為export的屬性,那在外部訪問的時候如果使用"a"+"dd"的方式訪問,打包工具是無法檢測到是否使用了add這個方法,因為訪問js的對象屬性實在是太靈活了。如果使用ES6的module新特性,則不需要將其作為export對象的屬性暴露出來的,而且ES6提出的module模塊有更好的模塊特性。這樣的話打包的時候打包工具就能夠檢測到暴露出來的那些方法沒有用到的,以便除去這些代碼。
在package.json文檔中并沒有提到module字段,那為什么會出現module的字段,其實這是rollup最早提出的概念pkg.module。在早期很多npm包都是遵循CommonJS規范的,那時package.json長這樣:
{ "name": "xxx", "version": "1.0.0", "main": "lib/index.js" }
在模塊中使用require("xxx"),會將require的參數(xxx)作為一個包來進行查找,讀取該目錄下package.json文件,取得main字段指定的文件作為入口。但在ES6盛行之后有了module模塊,并且這是官方標準,用起來更順手,而CommonJS還是傳統格式,所以rollup利用ES6的module新特性,在打包的性能上有了一個很好的提高。
那既然main字段可以作為文件的入口,何必還要module字段的呢?原因有以下兩點:
1)按照約定發布在npm上面的包都是基于ES5規范的,而且通常我們在使用babel工具將ES6編譯為ES5的過程中是將node_modules目錄下的文件過濾掉的,也就是說node_modules目錄下的文件將不會被babel工具編譯,這是因為避免babel編譯node_modules目錄下的文件會極大提高編譯速度。但如果我們把main字段直接指向我們用ES6語法寫的源碼上用戶就要打開babel編譯工具配置其編譯node_modules目錄下的文件。
2)如果用戶開發的是node環境下的項目使用到我們發布的基于ES6語法寫的源碼,可能連打包的步驟都不會有,而他的是node環境恰巧不支持ES6的語法,那代碼就會報錯。
因此main字段應該是指向編譯后的ES5的代碼,于是就應該出現一種新的字段解決這個問題,此時module字段就出現了,那現在的package.json長這樣:
{ "name": "xxx", "version": "1.0.0", "main": "lib/index.js", "module": "lib/index.esm.js" }
以上說明,我們的main字段應該指向基于CommonJS規范而使用ES5語法寫的源碼,而moudle字段應該是指向遵循ES6模塊規范的(也就是說使用ES6模塊導出的,這樣是為了能夠讓打包工具使用Tree-Shaking機制打包代碼)而使用ES5語法編寫的源碼,這是為了避免用戶在使用babel編譯工具屏蔽掉了node_modules目錄中的文件。我們可以看一下Vue源碼中package.json中main和module字段指定的源碼就是這樣做的。
在webpack2.0版本以上打包過程中,也逐漸開始支持module字段。在打包過程中,如果遇到module字段會優先使用module字段表示的路徑下的文件,如果module不存在,則用main字段表示的作為入口,并按照CommonJS的規范打包。
4.開發環境、生產環境和測試環境開發環境就是開發時候的服務器,配置比較隨意,會打開所有的錯誤提醒,盡量讓開發中的錯誤、bug等全部暴露出來方便調試。
測試環境一般是模擬真實運行環境,拷貝一份與真實環境相同的配置做各種測試,使其盡可能多的暴露出程序的問題出來方便修改。
生產環境就是真實運行環境,是對外提供服務的,一般會關閉錯誤報告,打開錯誤日志,收集錯誤,方便修改bug。
這三個環境就是一個項目所經歷的三個過程,開發 --> 測試 --> 上線
項目中我們可以使用process.env.NODE_ENV來取得當前的環境,開發環境返回字符串"development",生產環境返回字符串"production"
5.創建package.json使用npm的init命令創建一個package.json文件。之后會逐行提示你輸入每個字段的值。當然也可輸入npm init -y生成一個各字段默認值的packake.json文件
6.總結本文講了package.json文件的作用、其中個字段的說明以及如何生成package.json文件。其中還分析了package.json文件中main字段和module字段的不同以及dependencies和devDependencies兩個字段的區別。文中若有表述不妥或是知識點有誤之處,歡迎留言指正批評!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/99660.html
摘要:目前最常見的解決方案是和的特性。具體的使用方法移步官網而使用作為包管理器的同學,可以在中以字段聲明,就會以的方式管理。這樣的話,無論你的包管理器是還是,都能發揮的優勢要是包管理是,就會把依賴安裝交給處理。 最近我接手了一個項目,代碼量比較大、有點復雜。倉庫 clone 下來代碼有 50+ MB,npm install 安裝完體積飚到了近 2GB …… 熟悉了一下,這個項目比較復雜,采用...
摘要:為何有查閱了的文檔,并沒有找到字段的定義,直到才知道它是中最早就提出的概念。況且目前大部分仍是采用,所以便使用了另一個字段。所以目前主流的打包工具都是支持的,鑒于其優點,字段很有可能加入的規范之中。 引入 最近團隊的一個同學在搞 npm library 源碼的調試插件,因為內部的一個組件庫含有大量的邏輯,在某個項目中不經意就出現一個磨人的 bug,但是組件庫發布都是打包編譯后的代碼,而...
摘要:無需手動拷貝文件或者創建軟鏈接到目錄,有更優雅的解決方案。這是因為識別協議的,得知這個包需要直接從文件系統中獲取,會自動創建軟鏈接到中,完成安裝過程。 nodejs 社區乃至 Web 前端工程化領域發展到今天,作為 node 自帶的包管理工具的 npm 已經成為每個前端開發者必備的工具。但是現實狀況是,我們很多人對這個nodejs基礎設施的使用和了解還停留在: 會用 npm insta...
摘要:一快速入手背景好多包都提供命令行工具。二與命令行工具先初始化個項目配置創建文件,把路徑添加到中這些固定的工作可以由幫我們完成。參考用創建命令行工具配置 一、快速入手 1.1 背景: 好多nodejs包都提供命令行工具。咱也來學學吧。 1.2 刀耕火種時代: 環境:win32_X86nodejs: v5.9.1npm: 3.7.3首先創建個bat文件(cli-demo.bat),bat文...
閱讀 1344·2023-04-26 00:35
閱讀 2714·2023-04-25 18:32
閱讀 3344·2021-11-24 11:14
閱讀 770·2021-11-22 15:24
閱讀 1417·2021-11-18 10:07
閱讀 6466·2021-09-22 10:57
閱讀 2773·2021-09-07 09:58
閱讀 3565·2019-08-30 15:54