一、代碼共享方案

• npm 進(jìn)行發(fā)布上傳 npmregistry
• npm 進(jìn)行安裝

二、npm 包管理工具

2.1 介紹

• 安裝 node 的時(shí)候自動(dòng)安裝

• node package manager：Node 包管理工具

• 可以通過(guò) npm 安裝說(shuō)明已經(jīng)上傳到這個(gè)倉(cāng)庫(kù)里面了

• npm 官網(wǎng)查看是否有發(fā)布：npmjs.org

2.2 npm的配置文件

• package.json
• 記錄著項(xiàng)目的名稱(chēng)、版本號(hào)、項(xiàng)目描述
• 項(xiàng)目所依賴(lài)的其他庫(kù)的
• npm init：自動(dòng)生成 package.json
• 手動(dòng)從零開(kāi)始創(chuàng)建項(xiàng)目：npm init -y:所有東西都是yes
• 通過(guò)腳手架創(chuàng)建項(xiàng)目：vue create shopping：會(huì)搭建好這個(gè)項(xiàng)目所需要配置的東西，包括 package.json

2.3 常見(jiàn)的屬性

• name：項(xiàng)目的名稱(chēng)

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

• description：描述

• author：作者

• license：開(kāi)源協(xié)議

• private：true

  • npm不能發(fā)布它，防止私有項(xiàng)目或模塊發(fā)布出去的方式
  • main屬性：設(shè)置程序的入口

• script：配置腳本命令npm run xxx

• start、test、stop、restart可以省略run

• dependencies：開(kāi)發(fā)和生產(chǎn)環(huán)境都需要依賴(lài)的包：npm i axios

• devDependencies：開(kāi)發(fā)依賴(lài)，有一些包在生成環(huán)境是不需要的，比如webpack、babel、vue-loader

• 這個(gè)時(shí)候通過(guò)npm install webpack --save-dev安裝到devDependencies屬性中

  • 簡(jiǎn)寫(xiě)：npm install webpack -D

• peerDependencies：對(duì)等依賴(lài)，你依賴(lài)的一個(gè)包，它必須是以另外一個(gè)宿主包為前提的

  • element-plus：必須安裝vue

• engines：指定 Node 和NPM 的版本號(hào)

• browserslist：瀏覽器兼容情況

2.4 semver版本規(guī)范

• X.Y.Z
• X：主版本號(hào)，可能不兼容之前的版本，發(fā)生了重大版本更新
  • vue3 不兼容 vue2 版本的一些 api
• Y：次版本號(hào)，增加了新特性和新功能，但是兼容之前的版本
• Z：修訂號(hào)，沒(méi)有新功能，修正了之前的bug
• x.y.z：明確的版本號(hào)
• ^x.y.z：x 是保持不變的，y 和 z 永遠(yuǎn)安裝最新的版本，后面兩者動(dòng)態(tài)
• ~x.y.z：x 和y 是保持不變的， z 永遠(yuǎn)安裝最新的版本

2.5 npm install 命令

• 本地/局部安裝：在哪個(gè)文件夾就安裝到哪個(gè)文件夾里面，不會(huì)添加到環(huán)境變量里面

  • 會(huì)在當(dāng)前目錄下生成一個(gè)node_modules文件夾
  • 又分為
    • 開(kāi)發(fā)依賴(lài)： -D
    • 生產(chǎn)依賴(lài)

• 全局安裝：npm i webpack -g

  • 必須依賴(lài) webpack-cli -g
  • 一般安裝的都是工具包：yarn、webpack

• 原理

  • 從 遠(yuǎn)程registry 中進(jìn)行下載
  • 若本地兩個(gè)倉(cāng)庫(kù)都有 axios
  • 存在緩存的概念，通過(guò)算法去找對(duì)應(yīng)的包==》標(biāo)識(shí)符（integrity）
    • 在package-lock.json中
  • package-lock.json：確定死的版本，一般不修改
    • name：項(xiàng)目的名稱(chēng)
    • version：項(xiàng)目的版本
    • lockfileVersion：lock文件的版本
    • requires：使用requires來(lái)跟蹤模塊的依賴(lài)關(guān)系
    • dependencies：項(xiàng)目的依賴(lài)

• 卸載某個(gè)包：npm uninstall webpack npm ininstall axios -D

• 強(qiáng)制重新build：npm rebuild

• 清除緩存：npm cache clean

2.6 npm 發(fā)布自己的開(kāi)發(fā)包

• 編寫(xiě)自己的工具/庫(kù)/框架
• 必須包含 package.json
• 除了在github也可以發(fā)布在registry
• 步驟
  • 注冊(cè)npm賬號(hào) https://www.npmjs.com
  • 在vscode里面登錄：npm login
  • 修改 package.json
  • 發(fā)布到 npm registry上：npm publish
  • 更新倉(cāng)庫(kù)
    • 修改版本號(hào)：最好符合 semver 規(guī)范
    • 重新發(fā)布
  • 刪除發(fā)布的包：npm unpublish
  • 讓發(fā)布的包過(guò)期：npm deprecate

三、 yarn 工具

• 早期的 npm 存在安裝依賴(lài)速度緩慢、版本依賴(lài)混亂等問(wèn)題

• npm5 之后進(jìn)行很多升級(jí)和改進(jìn)

• npm i yarn -g

• 初始化：yarn init

• 安裝包：yarn add axios

• 與npm 區(qū)別

四、cnpm工具

• registry 是國(guó)外的服務(wù)器
• 淘寶的鏡像服務(wù)器十分鐘更新一次，進(jìn)行備份
• 查看npm鏡像：npm config get registry
• 設(shè)置npm的鏡像：npm config set registry=https://registry.npm.taobao.org
• 安裝一個(gè)新的工具：npm install cnpm -g
• 設(shè)置cnpm的鏡像：cnpm config set registry=https://registry.npm.taobao.org

五、npx工具

• npx是 npm5.2之后自帶的一個(gè)命令

• 在安裝項(xiàng)目之前，先創(chuàng)建package.json

  • 手動(dòng)創(chuàng)建：npm init -y
  • npm i webpack-cli -D（開(kāi)發(fā)依賴(lài)，打包）
  • 在里面script執(zhí)行命令，優(yōu)先在modules的bin里面找
  • 全局安裝webpack：npm i webpack@3.6.0 -g

• 使用 npx 直接（優(yōu)先）在node_modules下面的bin文件中優(yōu)先查找

  • webpack 對(duì)源代碼進(jìn)行打包
  • 默認(rèn)情況下運(yùn)行全局的

• 局部命令的執(zhí)行

  • 必須進(jìn)入到目錄，在終端使用如下命令 ./node_modules/.bin/webpack --version
  • 修改scripts腳本：“webpack”: “webpack --version”
  • 使用npx：npx webpack --version

六、pnpm 使用和原理

• performant 高性能的 npm

  • 快速/高效/嚴(yán)格/支持 monorepos /嚴(yán)格
  • 速度快、節(jié)省磁盤(pán)空間

• vue 源碼已經(jīng)開(kāi)始使用 pnpm 了

• 使用的公司：Microsoft、ByteDance

• 依賴(lài)包將被存放在一個(gè)統(tǒng)一的位置

  • 同一依賴(lài)包使用相同的版本，磁盤(pán)上只有依賴(lài)包這一份文件
  • 同一依賴(lài)包需要使用不同的版本，僅有版本之間不同的文件會(huì)被存儲(chǔ)起來(lái)
  • 所有文件都保存在硬盤(pán)上的統(tǒng)一的位置
    • 建立硬鏈接，不會(huì)占用額外的硬盤(pán)空間

• pnpm 創(chuàng)建非扁平的 node_modules目錄873

• 安裝npm install pnpm -g

• 當(dāng)使用npm或yarn安裝依賴(lài)包時(shí)，所有軟件包都將被提升到node_modules的根目錄下
  a. 源碼可以訪(fǎng)問(wèn)本不屬于當(dāng)前項(xiàng)目所設(shè)定的依賴(lài)包

• 通過(guò)硬鏈接和軟連接的方式連接起來(lái)

• 整個(gè)結(jié)構(gòu)嵌套的層級(jí)有點(diǎn)多,不會(huì)隨便引入非自己安裝的依賴(lài)pnpm的存儲(chǔ)store

• 獲取對(duì)應(yīng)目錄：pnpm store path

• 從store中刪除當(dāng)前未被引用的包來(lái)釋放store的空間：pnpm store prune文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-820302.html

七、硬鏈接/軟連接

• 硬鏈接：電腦文件系統(tǒng)中的多個(gè)文件平等地享有同一個(gè)文件存儲(chǔ)單元
• 符號(hào)鏈接：一種特殊的文件，包含有一條絕對(duì)/相對(duì)路徑指向其他文件或者目錄的引用
• copy aaa.js ffff.js----------文件拷貝
  • 會(huì)在硬盤(pán)中復(fù)制出來(lái)一份新的文件數(shù)據(jù)
• mklink /H bbb.js aaa.js----------建立了硬鏈接
  • bbb.js ： 新文件
  • aaa.js：原文件
  • 指向了磁盤(pán)中的同一份數(shù)據(jù)
  • 只能操作文件
• mklink aaa.js hhh.js-------建立軟連接
  • 快捷方式
  • 找到原文件
  • 再找到磁盤(pán)中的數(shù)據(jù)

到了這里，關(guān)于前端包管理工具的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！