从零开始搭建React+TypeScript+webpack开发环境-基于lerna的webpack项目工程化改造

项目背景

在实际项目中,我们的前端项目往往是一个大型的Webpack项目,结构较为复杂。项目根目录下包含了各种配置文件、源代码、以及静态资源,整体布局相对扁平。Webpack的配置文件分散在不同的部分,包括入口文件、输出目录、加载器和插件等,这使得项目的维护和配置变得相对繁琐。

项目主要由若干个模块和组件构成,它们之间存在复杂的依赖关系。在当前状态下,我们发现随着项目规模的扩大,构建时间逐渐变长,开发环境下的热模块替换效果不尽如人意。此外,项目中存在一些共享的代码和功能,但由于项目结构的限制,代码重用性并不理想。

依赖管理方面,我们使用yarn进行包管理,包括核心库、工具和其他第三方库。同时,项目已经接入了Git作为版本控制系统,但在版本控制方面我们也面临一些挑战,如分支管理、合并冲突等。

在部署和发布方面,我们采用了一套手动的流程,部署新版本涉及多个步骤,这可能导致一些不必要的错误。总体而言,我们的Webpack项目在开发和维护方面遇到了一些困难,因此我们决定考虑引入Lerna来进行项目重构,以期能够更好地管理多包结构、优化构建流程,提高代码的可维护性和可扩展性。

lerna简介

Lerna 是一个用于管理具有多个包(package)的 JavaScript 项目的工具。它优化了拥有多个包的代码库的工作流程,使得更容易进行本地开发、版本控制和发布。

以下是 Lerna 的一些主要特点和功能:

  1. 包管理: Lerna 可以将大型代码库拆分成多个包,并将这些包存储在单个代码仓库中。每个包都可以独立地进行版本管理和发布。

  2. 版本管理: Lerna 支持统一版本和独立版本两种模式。统一版本模式会确保所有包的版本号相同,而独立版本模式允许每个包有不同的版本号。

  3. 本地开发: Lerna 提供了一组命令,使得在进行本地开发时能够更轻松地进行包之间的协同工作。例如,它可以通过符号链接的方式将本地包链接到相应的依赖包,以便在本地进行测试和修改。

  4. 原子提交: Lerna 支持原子提交,即在进行版本管理操作时,可以确保所有包都被一起提交,以保持版本的一致性。

  5. 依赖管理: Lerna 能够优化包之间的依赖关系,确保包在本地开发和远程构建时都能够正确引用它们的依赖项。

  6. 自动化发布: Lerna 支持自动发布,可以自动升级版本号、生成变更日志,并将包发布到 npm 或其他仓库。

通过这些功能,Lerna 提供了一种更加高效的方式来管理复杂的 JavaScript 项目,特别是那些包含多个独立组件或模块的大型代码库。

lerna安装配置

初始化工作区

在你的 package.json 中添加 workspaces 字段。

{"private": true,"workspaces": ["packages/*"]
}

同时,在项目根目录下创建packages文件夹:

mkdir packages

配置lerna

# 全局安装lerna
yarn global add lerna
lerna init -i

完成上述步骤之后,会在项目根目录生成lerna.json配置文件,修改如下:

{"$schema": "node_modules/lerna/schemas/lerna-schema.json","version": "independent","npmClient": "yarn"
}

创建lerna子工程

本节我们以components文件夹为例,将其改造成一个lerna子项目zhique-ui用来开发前端组件库。

创建子项目

lerna create zhique-ui

引用父项目的配置

webpack配置

  • 安装依赖

    yarn add -D webpack-merge -W
    
  • 子项目webpack配置

    const merge = require('webpack-merge');
    const parentWebpackConfig = require('../../webpack.config');// 根据实际路径调整
    const mergedConfig = merge(parentWebpackConfig, {// 子项目的特定配置,如果有的话
    });module.exports = mergedConfig;

tsconfig配置

{"extends": "../../tsconfig.json","include": ["src/**/*"],"compilerOptions": {"outDir": "lib"}
}

Babel配置

{"extends": ".../../.babelrc"
}

编译子项目

  • components文件夹下的src目录拷贝到zhique-ui
    在这里插入图片描述
  • 编译src文件夹
// 在子工程根目录下执行
tsc

在这里插入图片描述

测试效果

更改组件引用方式

import React from 'react';
import { Icon } from 'zhique-ui';export default () => (<div><Icon type="compass" /></div>
);

访问页面

结语

在进行基于 Lerna 的前端工程化配置的过程中,我们深入了解了 Lerna 的基本概念和用法。从项目的初始化、子包的创建、配置文件的调整,到子包的相互依赖管理和独立开发,我们一步步探索了如何优雅地组织和管理前端项目。

通过 Lerna,我们能够更高效地进行代码共享、模块化开发,并充分利用 Yarn Workspaces 提供的依赖管理优势。同时,配置文件的合理调整和工具的灵活运用,为我们的前端工程提供了更好的可维护性和可扩展性。

希望这篇博文对你在前端工程化方面的学习和实践有所启发。当然,工程化的道路是不断演进和学习的过程,期待你在实际项目中能够灵活运用这些知识,构建出更加优秀的前端工程。

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

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

相关文章

ubuntu使用Parted GPT 创建大于2TB的的分区

问题 加购了一个4TB的ssd用于装载数据&#xff0c;使用fdisk挂载时候遇到一下warning&#xff1a; $ sudo fdisk /dev/sdbWelcome to fdisk (util-linux 2.34). Changes will remain in memory only, until you decide to write them. Be careful before using the write com…

文本生成高精准3D模型,北京智源AI研究院等出品—3D-GPT

北京智源AI研究院、牛津大学、澳大利亚国立大学联合发布了一项研究—3D-GPT&#xff0c;通过文本问答方式就能创建高精准3D模型。 据悉&#xff0c;3D-GPT使用了大语言模型的多任务推理能力,通过任务调度代理、概念化代理和建模代理三大模块&#xff0c;简化了3D建模的开发流程…

Vue3 + ts+ elementUi 实现后台数据渲染到下拉框选项中,滑动加载更多数据效果

前言 功能需求&#xff1a;下拉框中分页加载后端接口返回的人员数据&#xff0c;实现滑动加载更多数据效果&#xff0c;并且可以手动搜索定位数据&#xff0c;此项目使用Vue3 ts elementUi 实现 实现 把此分页滑动加载数据功能封装成vue中的hooks&#xff0c;文件命名为use…

C++ | 继承和多态

目录 继承 继承的概念及用法 继承的作用域 向上转型和向下转型 继承过程中的默认生成函数 菱形继承及其解决方案 - 虚继承 虚继承的原理 - 虚基类表 继承和组合 多态 虚函数 多态的定义及使用 纯虚函数与抽象类 多态的原理 小点补充 虚表的位置 父类指针new一个…

django 批量 serializers listserializers

Django drf 序列化器 序列化器 扩展serializers的有用性是我们想要解决的问题。但是&#xff0c;这不是一个微不足道的问题&#xff0c;而是需要一些严肃的设计工作。— Russell Keith-Magee, Django用户组 序列化器允许把像查询集和模型实例这样的复杂数据转换为可以轻松渲染…

conda修改虚拟环境名称

conda 修改虚拟环境名称 conda 不能直接更改名称&#xff0c;但是可以通过克隆环境解决 新建环境&#xff08;克隆旧环境&#xff09; conda create --name 新环境名 --clone 旧环境名 删除原环境 conda remove --name 旧环境名 --all 查看现有环境 conda env list conda i…

Spring boot 整合grpc 运用

文章目录 GRPC基础概念&#xff1a;Protocol Buffers&#xff1a;proto 基础语法&#xff1a;调用类型&#xff1a; Spring boot 整合 grpc项目结构&#xff1a;整合代码&#xff1a;父 pomproto 模块服务端&#xff1a;客户端&#xff1a;实际调用&#xff1a; 原生集成 GRPC基…

Java 变量初始化的两种方式和优缺点比较

第一种初始化方式&#xff1a;&#xff08;优先推荐&#xff09; String fileRename null; File fileToSave null; 这种方式将变量的作用域限定在循环外部&#xff0c;即在整个代码块中都可以使用这些变量。初始值为null表示变量在开始时没有具体的数值。 这种方式更好的…

SDN和NFV笔记

目录 SDN SDN的引入 SDN的概念 SDN网络部署的方式 SDN架构 OpenFlow SDN与传统网络的区别 SDN的应用 SDN的优点 NFV NFV的概念&#xff1a; NFV的架构&#xff1a; NFV相比于传统物理网元&#xff1a; NFV与SDN的关系 NFV与SDN的相似点 NFV与SDN的不同 SDN SD…

CVE-2023-25194 Kafka JNDI 注入分析

Apache Kafka Clients Jndi Injection 漏洞描述 Apache Kafka 是一个分布式数据流处理平台&#xff0c;可以实时发布、订阅、存储和处理数据流。Kafka Connect 是一种用于在 kafka 和其他系统之间可扩展、可靠的流式传输数据的工具。攻击者可以利用基于 SASL JAAS 配置和 SASL …

Linux常用命令:find、grep、vim、cat、less、more

目录 我的常用搜索命令 find 命令 grep 命令 vim 常用命令&#xff1a; 1.光标移动命令 2插入命令 3.删除命令 4.复制和粘贴命令 5.撤销和重做命令 6.查找和替换命令 7.文件操作命令 8.其他命令 cat命令 less 命令 more 命令 less和more命令的区别 less和vim命…

前端设计模式之【单例模式】

文章目录 前言介绍实现单例模式优缺点&#xff1f;后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;前端设计模式 &#x1f431;‍&#x1f453;博主在前端领域还有很多知识和技术需要掌握&#xff0c;正在不断努力填补技术短板。(如果出…

计算机毕业设计 基于Web的视频及游戏管理平台的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

低于1.5kg轻薄笔记本不完全汇总(2023年11月)

本文对一些轻薄笔记本&#xff08; < 1.5kg &#xff09;的基本信息进行了汇总&#xff0c;仅供参考。其中“容量”列只记录了该机型的一种配置&#xff0c;不代表该机型只有这种配置。“屏幕”列中&#xff0c;除特殊说明外&#xff0c;OLED一般为镜面屏&#xff0c;IPS和L…

OSG交互:选中场景模型并高亮显示

1、目的 可以在osg视图中选中指定模型实体,并高亮显示。共分为两种,一种鼠标点选,一种框选。 2、鼠标点选 2.1 功能说明 生成两组对象,一组cow对象可以被选中,另一组robot不能被选中;点击cow对象被选中高亮,点击robot被选中不高亮;点击空白处,弹出“select nothing!…

【Git】Git的GUI图形化工具ssh协议IDEA集成Git

一、GIT的GUI图形化工具 1、介绍 Git自带的GUI工具&#xff0c;主界面中各个按钮的意思基本与界面文字一致&#xff0c;与git的命令差别不大。在了解自己所做的操作情况下&#xff0c;各个功能点开看下就知道是怎么操作的。即使不了解&#xff0c;只要不做push操作&#xff0c;…

Java,多线程,线程的两种创建方式

首先是多线程的一些相关概念&#xff1a; 相关概念&#xff1a; 程序&#xff08;program&#xff09;&#xff1a;为完成特定任务&#xff0c;用某种语言编写的一组指令的集合。即指一段静态&#xff08;指不在执行中&#xff09;的代码。 进程&#xff08;process&#xf…

MATLAB算法实战应用案例精讲-【目标检测】机器视觉-工业相机参数

目录 前言 知识储备 相机镜头工作原理 算法原理 相机模型 坐标系

中国电信终端产业联盟5G Inside行业子联盟正式成立!宏电股份作为副理事单位受邀加入

11月9日&#xff0c;中国电信于广州召开“2023中国电信终端生态合作暨中国电信终端产业联盟&#xff08;以下简称CTTA&#xff09;第十四次会员大会”&#xff0c;联盟成员齐聚现场。作为CTTA大会的一个重要环节&#xff0c;中国电信终端产业联盟5G Inside行业子联盟正式成立&a…

C# .NET6 Log4net输出日志

在 C# .NET6 开发中&#xff0c;log4net 是一个常用的日志记录框架&#xff0c;它可以帮助我们方便地输出日志信息。本教程将向你展示如何在 C# .NET6 中实现 log4net 的日志输出功能。 整体流程 下面是实现“C# .NET6 log4net 输出日志”的整体流程&#xff0c;我们将通过以下…