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

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

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

1、介紹

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

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

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

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

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

//先安裝一個代理服務
npm install -g verdaccio

//運行
verdaccio

//運行后的默認端口是4873，此時我們就可以設置鏡像路徑為這個代理地址
npm set registry http://localhost:4873/

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

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

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

—2.2npm pack 歸檔文件

重點講一下這個方法

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

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

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

這里為什么要用commonjs，因為我們在編寫代碼的時候，是用的esm，esm不支持__dirname，__dirname只能在cjs中使用，后面我們編譯出來就是cjs

我用去新建一個index.ts文件

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

//存放我們打包后的文件目錄
const packageDir = path.join(__dirname, './packages')
//存在則不需要重復打包
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