当前位置: 首页 > news >正文

前端架构: 本地调试脚手架的2种方式

一、 调试简单的脚手架方式


假定脚手架名称是 xxx

1 )方式1

  • 在xxx脚手架项目目录的上一级,执行 npm i -g xxx
  • 这时候,就可以本地调试脚手架,在前文中已经说明软链的作用
  • 参考:https://blog.csdn.net/Tyro_java/article/details/136102674
  • 这种方式,可以用到已经发版上线的脚手架项目中

2 )方式2

  • 在未发过版的脚手架项目的根目录中,也就是 xxx/ 下执行 $ npm link 也可以调试本地脚手架
  • 这时候,在当前命令的日志输出中,就会出现两个软链
    • 将当前使用的node目录下的 bin/xxx -> 当前node所使用的node_modules中的 xxx/bin/index.js
      • 注意,这个要确保package.json 中配置的 bin 属性是 bin/index.js
    • 再将当前node所使用的node_modules中的 xxx -> 当前脚手架的项目目录 xxx
    • 注意 -> 表示软链的意思
  • 通过以上两次软链,就可以直接调试当前脚手架项目,做到随时修改,随时使用

二、调试含有分包的脚手架项目

  • 假设有两个平行的项目 x1 和 x2,在x1中需要引入x2包

  • x1的目录结构

    x1
    ├── package.json
    ├── bin└── index.js
    
    • 在package.json 中的 main 属性配置为 bin/index.js
  • x2的目录结构

    x2
    ├── package.json
    ├── lib└── index.js
    
    • 在这里的 lib/index.js中有一个方法
      module.exports = {sum (a, b) {return a + b}
      }
      
    • 在 package.json 中的配置
      • version 配置为 1.0.0
      • main 配置为 lib/index.js (注意,这个是x1引用x2的关键)
  • 如果想要在 x1 中自动连接 x2,尝试

    • 在x1目录的上一级目录执行 $ npm link x2
    • 这种方式,显然是失败的
    • 因为 x2 包还没有发布到 npm 上面
  • 再次尝试,首先在 x2 中执行 $ npm link

    • 让这个包在全局的 node_modules 目录中创建一个软链到当前开发项目 x2 的目录上
    • 这时候,全局环境下的 node_modules 下就可以找到 x2 了
    • 再次回到 x1 根目录 x1/ 下执行 $ npm link x2
  • 到这个时候,环境基本已准备好了,可以在x1中正常引入x2了,在x1中的 package.json 中

    {"dependencies": {"x2": "^1.0.0"}
    }
    
  • 回到 x1 中,进入 bin/index.js 编写

    #!/usr/bin/env nodeconst lib = require('x2');
    const { sum } = lib;
    const result = sum(1 + 2)console.log('result: ', result)
    
    • 验证,在 x1/ 下执行 $ node bin/index.js
      • 输出 result: 3
    • 或者执行 $ x1 来验证
  • 使用这种方式,基于 x1 来调试 x2,调试完成 x2 就可以准备上线了

  • 上线完成后,x1 就可以重新下载 x2 作为依赖了,但是这个时候,可能会出现一些问题

    • 如果直接在 x1/ 下执行 $ npm i 这时候下载的 x2 会被下载到 全局 node_modules 目录下
    • 而项目本地的node_modules 没有写的权限
    • 因为之前存在 link 的行为,而 link 后会在全局 node_modules 下创建软链
    • 这时候,需要执行
      • $ npm unlink x2
        • 注意这里,如果失败的话,尝试: 先执行一次 link x2, 之后再重新 unlink x2
      • $ npm remove -g x2
      • $ npm i x2 -S
  • 注意,以上的方式,不修改项目源码,而是修改本地环境,不会因为后期忘记修改回来或误操作引发bug

  • 修改源码的方式

    • 之前会用 npm 安装本地包,之后 dependencies 中,出现 "bar": "file:foo/bar" 这类的形式
    • 这种,会导致后期上线非常的不方便,而且不注意就会引发问题
  • 这种不修改源码(包括package中的配置)而修改本地环境的方式,可以作为一种最佳实践方式

相关文章:

前端架构: 本地调试脚手架的2种方式

一、 调试简单的脚手架方式 假定脚手架名称是 xxx 1 )方式1 在xxx脚手架项目目录的上一级,执行 npm i -g xxx这时候,就可以本地调试脚手架,在前文中已经说明软链的作用参考:https://blog.csdn.net/Tyro_java/article…...

现阶段适用于 单一架构 还是 分布式架构 ?

单体架构: 优势:简单直接,易于理解和开发,适用于小型应用或刚刚开始的项目。劣势:扩展性受限,只能通过增加服务器的数量来提高处理能力;所有模块都部署在一个单独的服务器或容器中,…...

掌握Go并发:Go语言并发编程深度解析

🏷️个人主页:鼠鼠我捏,要死了捏的主页 🏷️系列专栏:Golang全栈-专栏 🏷️个人学习笔记,若有缺误,欢迎评论区指正 前些天发现了一个巨牛的人工智能学习网站,通俗易懂&…...

创建一个多进程服务器和多线程服务器

多进程服务器 #include<myhead.h> #define PORT 8888 //端口号 #define IP "192.168.10.10" //IP地址//定义信号处理函数&#xff0c;用于回收僵尸进程 void handler(int signo) {if(signo SIGCHLD){while(waitpid(-1, NULL, WNOHAN…...

相机图像质量研究(18)常见问题总结:CMOS期间对成像的影响--CFA

系列文章目录 相机图像质量研究(1)Camera成像流程介绍 相机图像质量研究(2)ISP专用平台调优介绍 相机图像质量研究(3)图像质量测试介绍 相机图像质量研究(4)常见问题总结&#xff1a;光学结构对成像的影响--焦距 相机图像质量研究(5)常见问题总结&#xff1a;光学结构对成…...

18.谈谈你对JSON的理解

JSON 是一种基于文本的轻量级的数据交换格式。它可以被任何的编程语言读取和作为数据格式来传递。 在项目开发中&#xff0c;使用 JSON 作为前后端数据交换的方式。在前端通过将一个符合 JSON 格式的数据结构序列化为 JSON 字符串&#xff0c;然后将它传递到后端&#xff0c;后…...

绝地求生:“觉醒之旅”通行证曝光,西游主题通行证及成长型武器即将上线

随着27赛季即将结束&#xff0c;有关28.1版本的皮肤及通行证内容也被爆料出来&#xff0c;本次通行证为工坊通行证&#xff0c;和去年四圣兽通行证为同一类型&#xff0c;将于2月7日更新至正式服 除了通行证获取工坊币还是可以开箱获取并兑换一些奖励 先看通行证 四个套装应该分…...

JS如何判断普通函数与异步(async)函数

这里可以先打印一下普通函数和异步&#xff08;async&#xff09;函数的结构&#xff0c;如下图 可以看出两者原型链&#xff0c;普通函数的原型链指向的是一个函数&#xff0c;异步&#xff08;async&#xff09;函数原型链指向的是一个AsyncFunction&#xff0c;这时就会想到…...

ndk-r20b 编译 boost 1.74。

ndk-r20b 编译 boost 1.74&#xff0c;这是 ndk-r20b 支持得最大 boost 版本&#xff0c;再大就没法编译支持了&#xff0c;本文介绍方法是完整编译&#xff0c;不需要完整编译请转移到github&#xff0c;boost for android 得开源项目。 1.74 boost &#xff0c;安卓上面得版本…...

尚硅谷最新Node.js 学习笔记(四)

目录 八、express框架 8.1、express介绍 8.2、express使用 express下载 express初体验 8.3、express路由 什么是路由&#xff1f; 路由的使用 获取请求参数 获取路由参数 8.4、express响应设置 8.5、express中间件 什么是中间件&#xff1f; 中间件的作用 中间件…...

掌握XGBoost:GPU 加速与性能优化

导言 XGBoost是一种强大的机器学习算法&#xff0c;但在处理大规模数据时&#xff0c;传统的CPU计算可能会变得缓慢。为了提高性能&#xff0c;XGBoost可以利用GPU进行加速。本教程将介绍如何在Python中使用XGBoost进行GPU加速以及性能优化的方法&#xff0c;并提供相应的代码…...

【2024年毕设系列】如何使用Anaconda和Pycharm

【2024年毕设系列】如何使用Anaconda和Pycharm 视频教程地址&#xff1a;【2024毕设系列】Anaconda和Pycharm如何使用_哔哩哔哩 Hi&#xff0c;各位好久不见&#xff0c;这里是肆十二&#xff0c;首先在这里给大伙拜年了。 诸位过完年之后估计又要开始为了大作业和毕业设计头疼…...

Blazor OIDC 单点登录授权实例5 - 独立SSR App (net8 webapp ) 端授权

目录: OpenID 与 OAuth2 基础知识Blazor wasm Google 登录Blazor wasm Gitee 码云登录Blazor OIDC 单点登录授权实例1-建立和配置IDS身份验证服务Blazor OIDC 单点登录授权实例2-登录信息组件wasmBlazor OIDC 单点登录授权实例3-服务端管理组件Blazor OIDC 单点登录授权实例4 …...

基于蒙特卡洛的电力系统可靠性分析matlab仿真,对比EDNS和LOLP

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 1.课题概述 电力系统可靠性是指电力系统按可接受的质量标准和所需数量不间断地向电力用户供应电力和电能量的能力的量度&#xff0c;包括充裕度和安全性两个方面。发电系统可靠性是指统一并网的全部发电机…...

Spring boot整合redisson报错

Spring boot整合redisson报错 org.redisson.client.RedisConnectionException: Unable to connect to Redis server: localhost/127.0.0.1:6379 原因 原因是计算机连接不上redis导致的 解决方案 重启redis 在redis文件目录下打开cmd 1.检查redis是否在运行 redis-cli p…...

【AIGC】Stable Diffusion的ControlNet插件

ControlNet 介绍 ControlNet 插件是 Stable Diffusion 中的一个重要组件&#xff0c;用于提供对模型的控制和调整。以下是 ControlNet 插件的主要特点和功能&#xff1a; 模型控制&#xff1a; ControlNet 允许用户对 Stable Diffusion 中的模型进行精细的控制和调整。用户可以…...

【蓝桥杯单片机入门记录】认识单片机

目录 单片机硬件平台 单片机的发展过程 单片机开发板 单片机基础知识 电平 数字电路中只有两种电平&#xff1a;高和低 二进制&#xff08;8421码&#xff09; 十六进制 二进制数的逻辑运算 “与” “或” “异或” 标准C与C51 如何学好单片机 端正学习的态度、培…...

Rust 数据结构与算法:3栈:用栈实现符号匹配

1、符号匹配 如&#xff1a; (56)(78)/(43)、{ { ( [ ] [ ])}}、(ab)(c*d)func() 等各类语句的符号匹配。 这里我们关注的不是数字而是括号&#xff0c;因为括号更改了操作优先级&#xff0c;限定了语言的语义&#xff0c;这是非常重要的。如果括号不完整&#xff0c;那么整个…...

用ESP8266快速实现WIFI红外遥控器(SoC模式)

1&#xff0c;硬件结构图 主要使用了esp8266 wifi模块和红外串口通讯模块。有了红外串口通讯模块&#xff0c;省去了单片机的串口通讯和红外编码程序&#xff0c;大大缩短开发时间。因为红外通讯模块不支持3.3VTTL电平&#xff0c;所以两个模块之间加了一个2路电平转换模块&…...

微服务OAuth 2.1认证授权可行性方案(Spring Security 6)

文章目录 一、背景二、微服务架构介绍三、认证服务器1. 数据库创建2. 新建模块3. 导入依赖和配置4. 安全认证配置类 四、认证服务器测试1. AUTHORIZATION_CODE&#xff08;授权码模式&#xff09;1. 获取授权码2. 获取JWT 2. CLIENT_CREDENTIALS(客户端凭证模式) 五、Gateway1.…...

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

边缘计算医疗风险自查APP开发方案

核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...