前端架构: 本地调试脚手架的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中的配置)而修改本地环境的方式,可以作为一种最佳实践方式

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/680715.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C语言】实现栈

目录 (一)栈 (二)头文件 (三)功能实现 (1)初始化栈 (2) 栈的销毁 (3)压栈 (4) 出栈 (5&a…

【html学习笔记】1.概念

1.概念 1.1 HTML标准格式 <html><body><p>Hello World</p></body> </html>1.2 编辑方式 新建一个笔记本文件&#xff0c;将html语法格式的内容写入。保存后将记事本的.txt后缀换成.html,就可以在浏览器里运行了 1.3 中文问题 为了避…

前端架构: 从vue-cli探究脚手架原理

从使用角度理解什么是脚手架 脚手架本质是一个操作系统的客户端 在终端中去执行一个命令&#xff0c;这个命令本身它就是一个客户端我们其实可以把脚手架理解为操作系统的一个客户端通过命令去执行它的时候&#xff0c;这个命令往往是这样的一个构造&#xff0c;如下 比如&…

PoW算法,请出示你的证明

口信消息型拜占庭问题的解可以防止 (n - 1) / 3 个坏人 (其中 n 为节点数)作恶&#xff0c;这样一来也是可以通过不断增加节点数来突破 (n - 1) / 3 的限制。为了防止这一行为可以使用区块链技术中的工作量证明&#xff08;Proof of Work&#xff09;算法。 原理 PoW算法&…

devc++跑酷小游戏1.2.5

更新了在关卡中的复位和地图的刷新z或Z&#xff0c;存档还是没写出来&#xff0c;文件操作好难&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;…

【leetcode热题100】解码方法

难度&#xff1a; 中等通过率&#xff1a; 21.5%题目链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 题目描述 一条包含字母 A-Z 的消息通过以下方式进行了编码&#xff1a; A -> 1 B -> 2 ... Z -> 26给定一个只包含数字…

continue、break、return的区别

continue、break、return的区别 continuebreakreturn continue 作用&#xff1a;跳过本次循环&#xff0c;继续接下来的循环 for(int i 1;i < 10;i){if(i4){continue;}System.out.print(i " "); } //输出结果为&#xff1a;1 2 3 5 6 7 8 9 10 //4的输出被跳过…

C#中 Combine 静态方法

在C#中&#xff0c;Combine是System.IO.Path类的一个静态方法&#xff0c;用于将多个路径片段组合成一个完整的路径。 Combine方法的详细解释如下&#xff1a; public static string Combine(string path1, string path2);参数&#xff1a; path1&#xff1a;要组合的第一个…

【手写数据库toadb】数据字典的内容结构,它的生成,避免鸡生蛋蛋生鸡的问题,高频访下的性能应对

411 数据字典的作用 ​专栏内容: 手写数据库toadb 本专栏主要介绍如何从零开发,开发的步骤,以及开发过程中的涉及的原理,遇到的问题等,让大家能跟上并且可以一起开发,让每个需要的人成为参与者。 本专栏会定期更新,对应的代码也会定期更新,每个阶段的代码会打上tag,方…

【好玩AI】【Prompt】情人节了,用GPT写个【骂醒恋爱脑】的机器人跟自己对话吧

情人节了&#xff0c;让我们用GPT写个【骂醒恋爱脑】的机器人跟自己对话吧。 通过本文&#xff0c;你能学到&#xff1a; 1. 如何零代码搭建一个自己的机器人Bot 2. 骂醒恋爱脑的高级Prompt 通过本文&#xff0c;你还能得到&#xff1a; 恋爱脑可能被骂醒 为了白嫖&#xff0c;…

Linux下的多线程

前面学习了进程、文件等概念&#xff0c;接下里为大家引入线程的概念 多线程 线程是什么&#xff1f;为什么要有线程&#xff1f;线程的优缺点Linux线程操作线程创建线程等待线程终止线程分离 线程间的私有和共享数据理解线程库和线程id深刻理解Linux多线程&#xff08;重点&a…

【selenium】

selenium是一个Web的自动化测试工具&#xff0c;最初是为网站自动化测试而开发的。Selenium可以直接调用浏览器&#xff0c;它支持所有主流的浏览器。其本质是通过驱动浏览器&#xff0c;完成模拟浏览器操作&#xff0c;比如挑战&#xff0c;输入&#xff0c;点击等。 下载与打…

算法刷题:快乐数

快乐数 .习题链接题目题目解析初始值算法原理我的答案 . 习题链接 快乐数 题目 编写一个算法来判断一个数 n 是不是快乐数。 「快乐数」 定义为&#xff1a; 对于一个正整数&#xff0c;每一次将该数替换为它每个位置上的数字的平方和。 然后重复这个过程直到这个数变为 1…

【C语言】解析刘谦春晚魔术《守岁共此时》

今年的春晚上刘谦表演了魔术《守岁共此时》&#xff0c;台上台下积极互动&#xff08;尤其是小尼&#xff09;&#xff0c;十分的有趣。刘谦老师的魔术不仅仅是他的高超手法&#xff0c;还有这背后的严谨逻辑&#xff0c;下面我们来用C语言来解析魔术吧。 源代码 #define _CRT…

已解决ModuleNotFoundError: No module named ‘PIL‘异常的正确解决方法,亲测有效!!!

已解决ModuleNotFoundError: No module named PIL异常的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 文章目录 问题分析 报错原因 解决思路 解决方法 总结 Python是一个强大的编程语言&#xff0c;拥有丰富的第三方库来扩展它的功能。但有时&…

【笔记】Helm-5 Chart模板指南-13 调是模版

调试模板 调试模板可能很棘手&#xff0c;因为渲染后的模板发送了kubernetes API server&#xff0c;可能会以格式化以外的原因拒绝YAML文件。 以下命令有助于调试&#xff1a; 1、helm lint 是验证chart是否遵循最佳实践的首选工具。 2、helm template --debug在本地测试渲…

Python Flask Web 框架学习笔记+完整项目

Flask是一个轻量级的基于Python的web框架。 我们建议使用最新版本的 Python。Flask 支持 Python 3.8 及更高版本。 官网&#xff1a;欢迎使用 Flask — Flask 文档 &#xff08;3.0.x&#xff09; (palletsprojects.com) 完整项目&#xff1a; 1.简介 Flask 是一个轻量级的…

【实验2】在Hadoop平台上部署WordCount程序

文章目录 实验内容一、实验环境:二、实验内容与步骤(过程及数据记录):5. 分布式文件系统HDFS上的操作5.1 利用Shell命令与HDFS进行交互5.2 利用Web界面管理HDFS6. 分布式文件系统HDFS上的编程实践6.1 安装Eclipse6.2 创建Eclipse工程6.3 编写一个Java应用程序检测HDFS中是否…

敏捷开发和传统开发的区别及工具分享

敏捷开发和传统开发的区别主要体现在以下几个方面&#xff1a; 团队建设不同&#xff1a;敏捷开发以团队为单位&#xff0c;强调团队建设&#xff0c;赋予高度的责任&#xff0c;支持开发、透明的交流环境&#xff1b;传统开发以个人为单位&#xff0c;团队成员之间交付很少。…