前端内网开发npm 安装的几种方法

1、介绍

最近有同学问我,怎么在不联网的情况下安装依赖。一般我们开发都是有网的,那么配置一下register一下镜像路径就可以从国内的阿里云,淘宝,华为云,腾讯云等国内镜像文件。

有些同学开发项目会在内网开发,所以就需要离线去npm install一些依赖。

2、非联网/离线安装方法
---2.1搭建内网私服

我先通过一台电脑搭建一个内网服务,verdaccio是一个轻量级的私有npm代理注册服务

复制代码
//先安装一个代理服务
npm install -g verdaccio

//运行
verdaccio

//运行后的默认端口是4873,此时我们就可以设置镜像路径为这个代理地址
npm set registry http://localhost:4873/

//其他需求,如果你想要发布资源,推送到这个地址
npm publish --registry http://localhost:4873/

//项目成员安装依赖
npm install <package> --registry http://localhost:4873/

//也可以在项目中创建一个.npmrc文件
registry=http://localhost:4873/
---2.2npm pack 归档文件

重点讲一下这个方法

思路:首先我们用一台电脑,联网状态,去把所有依赖全部安装好,然后通过代码打成压缩包,拷贝到指定目录下

跟随潮流,同ts来吧,基础的创建项目啥的就不说了,讲重点

创建完项目后,如果需要用到ts,就执行这个命令tsc --init去创建一个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 => {
        //拿到文件的完整路径,后续打包路径
        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))
        }
        
    })
}
//执行
buildPackage()

//安装命令
npm install ./packages/xxxx.tgz
---2.3U盘拷贝

这个就不多说了

相关推荐
乐兮创想 小林17 小时前
企业官网移动端性能优化实战:从 Core Web Vitals 到图片/CDN/响应式的工程清单
前端·性能优化·网站建设·北京网站建设公司
前端一小卒17 小时前
不手写代码的第 30 天,我才明白前端这个岗位还剩什么
前端·javascript·ai编程
Ajie'Blog17 小时前
Copilot Agent Tasks API 开放:AI 编程开始进入后台任务时代
服务器·前端·javascript·人工智能·copilot·ai编程
老毛肚18 小时前
jeecgboot vue TS & 模板化 04
前端·javascript·vue.js
AI_零食19 小时前
鸿蒙PC Electron跨平台应用开发:24时区时间表应用详解
前端·华为·electron·开源·harmonyos·鸿蒙
winfredzhang20 小时前
Node.js + SQLite 实战:本地 Markdown 阅读书架源码深度解析
sqlite·node.js·safari·分页·多媒体·md文档
Electrolux20 小时前
[onlyoffice-v9]纯前端怎么实现编辑预览office
前端·javascript·github
码云之上20 小时前
聊聊如何设计一个高效、稳定的 Node.js 接入层
前端·后端·node.js
kyriewen20 小时前
我读了一遍 Babel 编译后的 async/await,终于搞懂了它的原理(附 20 行手写实现)
前端·javascript·面试
IT_陈寒21 小时前
Vite项目build后路由404了?你可能漏了这个小配置
前端·人工智能·后端