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

 更新时间:2025年01月23日 08:28:10   作者:rgrgrwfe  
这篇文章主要介绍了如何在不联网或离线环境下安装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盘拷贝

这个就不多说了

总结

到此这篇关于前端内网开发npm安装的几种方法的文章就介绍到这了,更多相关前端内网npm安装内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript正则验证密码强弱度的实现方法

    JavaScript正则验证密码强弱度的实现方法

    这篇文章主要介绍了JavaScript正则验证密码强弱度的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • JS打印gridview实现原理及代码

    JS打印gridview实现原理及代码

    打印gridview对于一些童鞋们真的是很陌生啊,不过没有关系,因为本文的出现,或让你茅塞顿开,好了话不多说,感兴趣的朋友可以了解下,或许对你学习js高级知识有所帮助
    2013-02-02
  • Boostrap栅格系统与自己额外定义的媒体查询的冲突问题

    Boostrap栅格系统与自己额外定义的媒体查询的冲突问题

    这篇文章主要介绍了Boostrap栅格系统与自己额外定义的媒体查询的冲突问题,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-02-02
  • Js 正则表达式知识汇总

    Js 正则表达式知识汇总

    本文对javascript中正则表达式进行了总结汇总,将知识点和注意点都理了一下,并附上2个练习题,这里分享给小伙伴
    2014-12-12
  • Listloading.js移动端上拉下拉刷新组件

    Listloading.js移动端上拉下拉刷新组件

    这篇文章主要介绍了Listloading.js移动端上拉下拉刷新组件的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-08-08
  • js实现html滑动图片拼图验证

    js实现html滑动图片拼图验证

    这篇文章主要为大家详细介绍了js实现html滑动图片拼图验证,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • amd、cmd、esmodule、commonjs区别详解

    amd、cmd、esmodule、commonjs区别详解

    本文主要介绍了amd、cmd、esmodule、commonjs区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • 详解JS模块导入导出

    详解JS模块导入导出

    这篇文章主要介绍了详解JS模块导入导出以及相关问题解决方法,需要的朋友学习参考下吧。
    2017-12-12
  • 浅谈js promise看这篇足够了

    浅谈js promise看这篇足够了

    下面小编就为大家分享一篇浅谈js promise的使用。具有很好的参考价值,看完这篇都懂了。希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 使用IE的地址栏来辅助调试Web页脚本

    使用IE的地址栏来辅助调试Web页脚本

    使用IE的地址栏来辅助调试Web页脚本...
    2007-03-03

最新评论