快捷導(dǎo)航

前端內(nèi)網(wǎng)開發(fā)npm安裝的幾種方法小結(jié)

更新時(shí)間：2025年01月23日 08:28:10 作者：rgrgrwfe

這篇文章主要介紹了如何在不聯(lián)網(wǎng)或離線環(huán)境下安裝npm依賴,文中通過代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

1、介紹

最近有同學(xué)問我，怎么在不聯(lián)網(wǎng)的情況下安裝依賴。一般我們開發(fā)都是有網(wǎng)的，那么配置一下register一下鏡像路徑就可以從國內(nèi)的阿里云，淘寶，華為云，騰訊云等國內(nèi)鏡像文件。

有些同學(xué)開發(fā)項(xiàng)目會在內(nèi)網(wǎng)開發(fā)，所以就需要離線去npm install一些依賴。

2、非聯(lián)網(wǎng)/離線安裝方法

—2.1搭建內(nèi)網(wǎng)私服

我先通過一臺電腦搭建一個(gè)內(nèi)網(wǎng)服務(wù)，verdaccio是一個(gè)輕量級的私有npm代理注冊服務(wù)

//先安裝一個(gè)代理服務(wù)
npm install -g verdaccio

//運(yùn)行
verdaccio

//運(yùn)行后的默認(rèn)端口是4873，此時(shí)我們就可以設(shè)置鏡像路徑為這個(gè)代理地址
npm set registry http://localhost:4873/

//其他需求，如果你想要發(fā)布資源，推送到這個(gè)地址
npm publish --registry http://localhost:4873/

//項(xiàng)目成員安裝依賴
npm install <package> --registry http://localhost:4873/

//也可以在項(xiàng)目中創(chuàng)建一個(gè).npmrc文件
registry=http://localhost:4873/

—2.2npm pack 歸檔文件

重點(diǎn)講一下這個(gè)方法

思路：首先我們用一臺電腦，聯(lián)網(wǎng)狀態(tài)，去把所有依賴全部安裝好，然后通過代碼打成壓縮包，拷貝到指定目錄下

跟隨潮流，同ts來吧，基礎(chǔ)的創(chuàng)建項(xiàng)目啥的就不說了，講重點(diǎn)

創(chuàng)建完項(xiàng)目后，如果需要用到ts，就執(zhí)行這個(gè)命令tsc --init去創(chuàng)建一個(gè)tsconfig.json文件，在這個(gè)文件中將module:""設(shè)置為commonjs，即module:“commonjs”，這里涉及到.js，.cjs，.mjs幾種后綴的知識點(diǎn)，有機(jī)會再講。。。

這里為什么要用commonjs，因?yàn)槲覀冊诰帉懘a的時(shí)候，是用的esm，esm不支持__dirname，__dirname只能在cjs中使用，后面我們編譯出來就是cjs

我用去新建一個(gè)index.ts文件

import { exeSync } from 'node:child-process'
import fs from 'node:fs'
import path from 'node:path'

//存放我們打包后的文件目錄
const packageDir = path.join(__dirname, './packages')
//存在則不需要重復(fù)打包
if(!fs.existsSync(packageDir)){
    fs.mkdirSync(packageDir, {recursive: true})
}
//讀取node_modules文件目錄下的文件
const node_modules = path.join(__dirname, './node_modules')

function buildPackage() {
    const dirFileList = fs.readdirSync(node_modules ).filter(dit => {
        //排除.開頭文件和@符號開頭文件，其他請自行排除
        return !(dirFileList .startWith('.') || dirFileList .startWith('@'))
    })
    //遍歷所查詢到的文件
    dirFileList && dirFileList .map(dir => {
        //拿到文件的完整路徑，后續(xù)打包路徑
        const modules = path.join(node_modules, dir)
        //打包命令，需要引用，在第一行
        exeSync('npm pack', { cwd: modules })
        //將打包完的tgz文件找到
        const tgzfile = fs.readdirSync(modules).find(file => {
            return file.endsWith('.tgz')
        })
        if(tgzfile){
            //將找到的打包tgz文件移動到指定的package目錄中
            fs.renameSync(path.join(modules,tgzfile), path.join(packageDir,tgzfile))
        }
        
    })
}
//執(zhí)行
buildPackage()

//安裝命令
npm install ./packages/xxxx.tgz