從零學腳手架(一)---環境介紹


環境准備

Node

當前前端時代,Node.JS已是前端開發必備依賴,安裝環境時往往第一個就是Node.JS,那么我們也從Node.JS開始

截至到編寫本章時,Node.JS官網的LTS版本為 14.15.5 ,最新版本為 15.9.0

僅僅用於腳手架的話,並不需要特別新的Node版本,所以不用特別激進,使用最新的LTS版本即可。

NVM

安裝Node.JS還有一個更好的方案:NVM工具。

NVM是一個Node.JS版本管理工具,允許同時存在多個Node版本,並能夠輕易進行切換。

使用NVM能夠很好的解決某些項目針對指定Node版本的情況

NVM安裝和使用就不在此進行贅述,網上具有好多這樣的文章,都很詳細。其用法也就是nvm installnvm usenvm ls 這些命令。

NPM

NPMNode.JS下的一個庫管理工具。

安裝Node.JS時會默認安裝NPM

Node官方提供的一個公共倉庫,里面具有海量的工具庫。

NPM默認是從公共倉庫獲取庫,有的公司還會搭建私有倉庫。

個人學習都是使用公共倉庫。

🐋使用NPM時一般都需要配置國內鏡像源,畢竟國外網速是個問題,配置鏡像源網速也具有許多的文章,在此就不詳細展開

Yarn

有許多人使用Yarn進行庫管理(本人也是),Yarn官方介紹說Yarn具有速度快、可靠等優點。

一開始的確如此, 不過在Yarn誕生后,NPM也緊跟其后進行了優化,現在兩者差別不大了,至於使用哪個取決於個人喜好,有興趣的朋友可以參考npm 和 yarn 你選哪個?

日常使用也只不過命令語法上的差別差別:npm installyarn add

🐋🐋 Yarn官方下載安裝程序頁面404了,下載可以去GitHub

🐋 在此使用Yarn

package.json

package.json文件是什么

package.json 文件是 項目配置文件 ,文件中具有當前項目的基本信息(項目名稱、作者、版本等)、依賴庫等信息。

使在用yarn init 命令時,會初始化一個項目

初始化項目時,填寫當前項目基本信息,這些信息就是當前項目的描述。

項目初始化完成后會在當前目錄下創建一個 package.json 配置文件: package.json 中就包含了初始化時的基本信息。

🐋package.json中基本信息是在項目發布為公共庫時使用。例如 name代表當前NPM庫的名稱。 main代表當前NPM的根文件

項目初始化完畢后,Node會將當前 package.json 文件所在的目錄默認為一個模塊(Module) 也就是一個項目

在此目錄安裝或卸載庫 都是對 package.json 文件的更新。

使用yarn install初始化項目時 也是根據 package.json 文件依賴的庫下載到本地(下載到 node_modules 目錄)

🐋🐋 項目引用的外部包存放在node_modules目錄下,所以此目錄會非常大,使用GIT項目管理時要進行忽略

添加依賴包

項目在使用外部庫時會分為 生產環境依賴開發環境依賴 ,在 package.json 中分別位於 dependenciesdevDependencies 屬性。

生產環境依賴就是代碼在運行時使用到的依賴。例如jqueryvue等,是在實際代碼使用到的。

開發環境依賴庫 ,則是參與打包器等一系列的庫,這種庫在后面會詳細講解。

添加依賴包的命令為yarn add [-D] pack-name

其中 -D 表示開發環境依賴。默認則添加到生成環境依賴,例如添加jquerywebpack。 其中JQuery為生成環境依賴,而webpack則是開發環境依賴

yarn add -D webpack@5.24.0

yarn add jquery@3.5.1

生產環境依賴開發環境依賴 的 安裝 區分其實對於內部項目無所謂,只有針對 要發布到NPM供別人使用時才體現的出來,

不過為了規范,哪怕在內部項目,最好也按照依賴規范。 具體請參考:通俗的告訴你,為什么是 devDependencies

🐋🐋

jquery有的會安裝在peerDependencies屬性中,這個屬性是通用包引用的概念,具體請參考:一文搞懂peerDependencies

NPM包版本具有^~*等符號,這些符號代表匹配最新的版本,具體請參考:NPM依賴包版本號~和^和的區別

添加一個包后會在根目錄中生成 node_modules 目錄和 yarn.lock 文件,這兩個文件都是根據依賴項自動管理。不需要手動更改。

  • node_modules 當前項目依賴庫存放目錄
  • yarn.lock 當前項目已安裝的每個依賴庫的確切版本的信息以及代碼的校驗和以確保代碼完全相同。

scripts

package.json 文件具有一個 scripts 屬性,這個屬性代表執行命令屬性。 key 為命令語句, value 為所執行的命令。

使用webpack時 執行的yarn startyarn build命令,就是設置 scripts 屬性中的。

scripts的屬性可以隨意設置,例如可以使用start執行node,甚至可以執行其他一切可執行程序:打開計算器(calc)

其它

package.json 作為一個配置文件,允許設置項目中使用到的自定義屬性,例如之后會用到的 babelbrowserslist

總結

🐋🐋🐋

  • NVMNode版本管理工具,使用它可以更好的管理Node環境
  • NPMNode庫管理工具
  • **package.json **文件是Node項目配置文件,依賴項、基本信息、命令執行語句都存放於 package.json 文件

如果此篇對您有所幫助,在此求一個star。項目地址: OrcasTeam/my-cli

本文參考

本文依賴

package.json

{
  "name": "my-cli",
  "version": "1.0.0",
  "main": "index.js",
  "author": "mowenjinzhao<yanzhangshuai@126.com>",
  "license": "MIT",
  "devDependencies": {
    "webpack": "5.24.0",
  },
  "dependencies": {
    "jquery": "3.5.1"
  },
  "scripts": {
    "start": "node",
    "calc": "calc"
  }
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM