前端架构: 脚手架之包管理工具的案例对比及workspaces特性的使用与发布过程

news2025/2/26 0:24:45

npm的workspaces 特性


1 )使用或不使用包管理工具的对比

  • vue-cli 这个脚手架使用 Lerna 管理,它的项目显得非常清晰
  • 在 vue-cli 中包含很多 package 点开进去,每一个包都有package.json
  • 它里面有很多项目,再没有 Lerna 之前去维护和管理这么多包是会非常困难的
  • 而 webpack 至今还没有用任何的包管理工具,在其 lib 下会有非常多的模块
  • 而且它还自己写了很多脚本来进行管理各种功能
  • 同上上述正反两个例子,可见,不使用包管理工具,整个项目维护起来会很麻烦
  • 比如说你想去给 webpack 做一些贡献,很麻烦很困难,因为你不太清楚,你的改动对整体一个影响
  • 如果使用包管理以后,它就会拆的很清楚,你的改动就是聚合在一个package里面的,这个就是用包管理一些好处
  • 包管理目前流行的两种方式是 workspaces 和 Lerna

2 )workspaces 的基本使用

  • 在一个脚手架项目中,比如xyzcli项目中(之前一直用这个脚手架演示)创建workspaces 目录
    • $ mkdir workspaces && cd workspaces
  • 在 workspaces 目录中执行
    • $ npm init -y
    • 其实,在使用 npm init 的过程中,通过 $ npm init --help
    • 可以看到 Options 中存在 [-w|--workspace <workspace-name> [-w|--workspace <workspace-name> ...]]
    • 也就是 -w 的参数, 比如:$ npm init -w a -w b 默认一路回车
    • 这样,就会在 workspaces 目录下新建了两个包:a 和 b,每个包中,都存在package.json,其name属性分别为 a 和 b
    • 在 workspace/node_modules下 生成a和b的两个软链
    • 在 workspace/package.json 中,存在 workspaces 的配置
      "workspaces": [
        "a",
        "b"
      ]
      
  • 好,现在结构基本搭建完成,现在我要在 workspaces 目录对a包进行安装依赖
    • $ npm i vue -w a
    • 这时候,a包中安装了 chalk 的依赖,但是a包中没有生成 node_modules 目录
    • 在 workspaces 目录下的 node_modules 中安装了 chalk, 而 a 的 package.json 中的 dependencies 是 chalk
    • 同时,b包中的package.json中是没有的
  • 这是 workspace 非常有意思的特性,它把各个内层包的依赖抽象到了最外层来进行管理
  • 这里借助了 commonjs 中对 node_moduels 查找的特性,如果当前查找不到,去上一层目录中去查找
  • 由于此特性,可以通过最外层来管理依赖包,这样的好处是非常明显的
  • 现在在a包中使用chalk, 在package.json中添加 "type": "module" 在 a/index.js 中编写
    import  chalk from 'chalk';
    
    export default {
      print() {
        console.log(chalk.red('Hello workspace'))
      }
    }
    
  • 现在继续修改 a/package.json 中的 name属性,修改为:“@somegroup/a”
  • 这时候,a包就会在后续发布中,自动在 somegroup 分组中了,这个 somegroup 可以是自己起的任意组名
  • 好现在在workspaces目录中新增一个具有cli功能的包,比如就叫做 cli 这个脚手架包
  • $ npm init -w cli 一路回车, 创建了 cli 这个脚手架包
  • 将 cli 包的 package.json 目录中的name属性改成和a包同组,如:"name": "@somegroup/cli"
  • 同时在 workspaces/cli 的package.json中添加 bin 属性
    {
      "bin": {
        "cli": "bin/cli.mjs"
      }
    }
    
  • 因为这时候 cli 脚手架包的 name 不是在一开始创建的,而是一路回车之后,要确定和a同组的,需要执行下 $ npm i -ws 来更新下分组
    • 这时候可以看到 workspaces/node_modules/@somegroup/下存在 a 和 cli 两个软链
    • 同时,可以删除 workspaces/node_modules/cli 这个软链
  • 这时候,想要在 cli 这个脚手架包中引用 a包来调试,需要 在 workspaces 目录下执行
    • $ npm i @somegroup/a -w cli
    • 这时候,会在 cli 脚手架目录中添加了 @somegroup/a 这个 dependencies
  • 新建 bin/cli.mjs 编写
    #!/usr/bin/env node
    
    import * as a from '@somegroup/a'
    
    const { print } = a.default;
    print();
    
  • 最后,可以将 这个 cli 工具在workspaces下配置使用, 因为在 workspace/node_modules/.bin 下有这个cli的软链
  • 所以在 workspaces/package.json 中添加配置
    "scripts": {
      "cli": "cli"
    },
    
  • 这时候在 workspaces 下执行 $ npm run cli, 这样,我们的脚手架就可以直接使用了,如下图
  • 以上就是使用 workspace 来进行包的管理,这里生成了3个包,其中包a和包cli都在@somegroup组下

  • 这里演示了脚手架包cli如何使用包a,在不发布的场景下进行调试,并且对cli包本地的调试

  • 同时,可以参考之前的文章:https://blog.csdn.net/Tyro_java/article/details/136112045

  • 好,现在发布之前, 还需要处理一下b包,毕竟建立这个包是有用的,不在远程发布有问题的包

  • 将b包的name修改成 "name": "@somegroup/b", 目前这三个包都在 @somegroup 组中了

  • 在b中新建 index.js, 在b/package.json中同步"main": "index.js", 并添加 "type": "module"

  • 给b包安装 ora 依赖,在 workspaces 目录下执行 $ npm i ora -w b

  • 编写 b/index.js

    import ora from 'ora';
    
    export default function() {
    	const spinner = ora().start('loading');
    	setTimeout(() => {
    		spinner.stop();
    	}, 3000)
    }
    
  • 因为修改了 b 的package.json的name属性,需要同步下 $ npm i -ws

  • 并且注意删除下之前 workspaces/node_modules/b 这个叫b的软链

  • 好,现在b包作为工具库为 cli 脚手架提供方法,为cli安装b包, 回到 workspaces 目录下

  • 执行 $ npm i @somegroup/b -w cli, 修改 cli/bin/cli.js 文件

    #!/usr/bin/env node
    
    import a from '@somegroup/a'
    import bLoading from '@somegroup/b'
    
    const { print } = a;
    
    print();
    
    console.log('----------');
    
    bLoading();
    
  • 这时候万事俱备了,就可以发布上线了, 在 worksapces 目录中

    • npm publish -ws 发布所有 workspace 包内容,这个是全部包发布的举例
    • npm publish -w a 发布a包,这个是单个包发布的举例
  • 注意,如果包存在发布报错,可能是因为权限问题,可修改对应包的package.json

    {
    	"publishConfig": {
    		"access": "public"
    	}
    }
    
  • 这样就顺利发布成功了,注意,Lerna 使用时会帮助我们考虑到这一点,Lerna 会省事一些

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

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

相关文章

【Spring】回顾反射机制

一、分析方法四要素 package org.qiu.reflect;/*** author 秋玄* version 1.0* email qiu_2022aliyun.com* project Spring* package org.qiu.reflect* date 2022-11-11-17:26* since 1.0*/ public class SomeService {public void doSome(){System.out.println("public …

【Unity】如何在Unity 中创建带有缩放效果的滚动视图(具有吸附效果的实现与优化)?

效果预览&#xff1a; 目录 效果预览&#xff1a; 一、引言&#xff1a; 二、问题描述 三、解决方案&#xff1a; 三、优化&#xff1a; 四、结论 一、引言&#xff1a; 在Unity开发中&#xff0c;经常需要实现滚动视图&#xff08;ScrollView&#xff09;中的内容吸附到…

个人博客系列-Django部署-nginx(3)

使用Nginx uwsgi进行部署django项目 一. 检查项目是否可以运行 启动项目 python manage.py runserver 0.0.0.0:8099输入ip:8099 查看启动页面 出现上述页面表示运行成功 二. 安装uwsgi并配置 2.1 下载uwsgi pip install uwsgi新建文件test.py写入内容&#xff0c;测试一…

面试笔记系列六之redis+kafka+zookeeper基础知识点整理及常见面试题

目录 Redis redis持久化机制&#xff1a;RDB和AOF Redis 持久化 RDB的优点 RDB的缺点 AOF 优点 AOF 缺点 4.X版本的整合策略 Redis做分布式锁用什么命令&#xff1f; Redis做分布式锁死锁有哪些情况&#xff0c;如何解决&#xff1f; Redis如何做分布式锁&#xff1f…

Logic Pro:专业音乐制作软件,为你的音乐插上翅膀

Logic Pro是一款功能强大的音乐制作软件&#xff0c;专为专业音乐人和音乐爱好者设计。它提供了全面的音乐创作工具&#xff0c;包括音频录音、编辑、混音、合成以及自动化等功能&#xff0c;让你能够轻松实现音乐梦想。 Logic Pro软件获取 首先&#xff0c;Logic Pro拥有卓越…

Tomcat:Java Web

简介 Apache Tomcat 是 Java Web 应用程序开发中最为常用的服务器之一。作为一个开源、轻量级的 Servlet 容器和 JSP 容器&#xff0c;Tomcat 提供了一个稳定可靠的运行环境&#xff0c;使得开发者可以快速开发、部署和管理 Java Web 应用程序。本文将深入介绍 Tomcat 的特点、…

js 面试 sort背后原理及排序使用方法

1 sort 概念 2 原理 之前版本是用的插入排序 和 快速排序。 现在用的是冒泡排序。 3 排序方式&#xff1a; 2-1 根据字符码点排序 2-2 从小到大或从大到小排序 2-3 对数组中的对象进行排序

高校水电预付费管控系统

高校水电预付费管控系统在现代高校管理中扮演着重要角色。这一系统通过整合先进的科技手段&#xff0c;如智能计量设备和互联网技术&#xff0c;实现对校园水电消费的精准监控和管理。首先&#xff0c;高校水电预付费管控系统能够有效监测学生宿舍、教学楼等区域的实时用水用电…

Zookeeper基础入门-2【ZooKeeper 分布式锁案例】

Zookeeper基础入门-2【ZooKeeper 分布式锁案例】 四、ZooKeeper-IDEA环境搭建4.1.环境搭建4.1.1.创建maven工程&#xff1a;zookeeper4.1.2.在pom文件添加依赖4.1.3.在项目的src/main/resources 目录下&#xff0c;新建文件为“log4j.properties”4.1.4.创建包名com.orange.zk …

网站数据加密之Hook通用方案

文章目录 1. 写在前面2. 请求分析3. 编写Hook4. 其他案例 【作者主页】&#xff1a;吴秋霖 【作者介绍】&#xff1a;Python领域优质创作者、阿里云博客专家、华为云享专家。长期致力于Python与爬虫领域研究与开发工作&#xff01; 【作者推荐】&#xff1a;对JS逆向感兴趣的朋…

Python进阶学习:Pickle模块--dump()和load()的用法

Python进阶学习&#xff1a;Pickle模块–dump()和load()的用法 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f448; 希望得到您…

【c语言】探索联合和枚举---解锁更多选择

前言 上一篇 讲解的是结构体相关知识&#xff0c;接着本篇主要讲解的是 联合和枚举 相关知识 结构体、联合体和枚举都属于 自定义类型。 那么接下来就跟上我的节奏&#xff0c;准备发车~ 欢迎关注个人主页&#xff1a;逸狼 创造不易&#xff0c;可以点点赞吗~ 如有错误&#xf…

网络协议:DHCP协议工作原理,DHCP分配方式,DHCP租约,Wireshark抓包分析DHCP报文

「作者主页」&#xff1a;士别三日wyx 「作者简介」&#xff1a;CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「专栏简介」&#xff1a;此文章已录入专栏《计算机网络零基础快速入门》 DHCP协议 一、简介二、分配方式1&#xff09;自动分配2&#xff0…

C++笔记(六)--- 静态成员变量/函数(static)

目录 C语言中静态变量 C静态成员变量 C静态成员函数 C语言中静态变量 1.函数内部用static修饰的变量&#xff0c;只能在此函数使用&#xff0c;但所修饰的变量不随函数释放而释放&#xff0c;下次调用时的值仍为上次结束时的值2.static修饰的全局变量只能在其定义的文件使用…

DAY9-防病毒AV概述

DNS过滤 URL过滤和DNS过滤对比

clickhouse 大表数据归档处理解决办法

本文作者为 360 奇舞团前端开发工程师 李彬 一、需求场景 基于目前项目在各个应用上的数据采集&#xff0c;尤其是性能监控上的采集&#xff0c;数据量越来越大&#xff0c;例如pv数据的采集表三个月的数据量已经在3亿&#xff0c;数据量小的也有几百万&#xff0c;但是目前的常…

浅谈 Linux fork 函数

文章目录 前言fork 基本概念代码演示示例1&#xff1a;体会 fork 函数返回值的作用示例2&#xff1a;创建多进程&#xff0c;加深对 fork 函数的理解 前言 本篇介绍 fork 函数。 fork 基本概念 pid_t fork(void) fork 的英文含义是"分叉"&#xff0c;在这里就是 …

TypeScript+React Web应用开发实战

&#x1f482; 个人网站:【 海拥】【神级代码资源网站】【办公神器】&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交流的小伙伴&#xff0c;请点击【全栈技术交流群】 在现代Web开发中&#xff0c;React和TypeScrip…

嵌入式学习day25 Linux

进程基本概念: 1.进程: 程序&#xff1a;存放在外存中的一段数据组成的文件 进程&#xff1a;是一个程序动态执行的过程,包括进程的创建、进程的调度、进程的消亡 2.进程相关命令: 1.top 动态查看当前系统中的所有进程信息&#xff08;根据CPU占用率排序&a…

54.仿简道云公式函数实战-文本函数-LOWER

1. LOWER函数 将一个文本字符串中的所有大写字母转换为小写字母 2. 函数用法 LOWER(text) 3. 函数示例 将一个文本字符串中的所有大写字母转换为小写字母。 4. 代码实战 首先我们在function包下创建text包&#xff0c;在text包下创建LowerFunction类&#xff0c;代码如下…