从零开始搭建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 字段。

json 复制代码
{
  "private": true,
  "workspaces": [
    "packages/*"
  ]
}

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

bash 复制代码
mkdir packages

配置lerna

bash 复制代码
# 全局安装lerna
yarn global add lerna
lerna init -i

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

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

创建lerna子工程

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

创建子项目

bash 复制代码
lerna create zhique-ui

引用父项目的配置

webpack配置

  • 安装依赖

    bash 复制代码
    yarn add -D webpack-merge -W
  • 子项目webpack配置

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

tsconfig配置

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

Babel配置

json 复制代码
{
  "extends": ".../../.babelrc"
}

编译子项目

  • components文件夹下的src目录拷贝到zhique-ui
  • 编译src文件夹
bash 复制代码
// 在子工程根目录下执行
tsc

测试效果

更改组件引用方式

ts 复制代码
import React from 'react';
import { Icon } from 'zhique-ui';

export default () => (
  <div>
    <Icon type="compass" />
  </div>
);

访问页面

结语

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

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

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

相关推荐
Bug生产工厂19 小时前
React支付组件设计与封装:从基础组件到企业级解决方案
前端·react.js·typescript
wordbaby19 小时前
一行看懂高阶函数:用 handleConfirm 拿下 DatePicker 回调
前端·react.js
2401_8534068820 小时前
Tdesign-React 组件 Card 实现头部固定,内容区单独可滚动
前端·react.js·tdesign
薛定谔的算法20 小时前
手写React:从Dideact理解前端框架的核心原理
前端·react.js·架构
bug_kada20 小时前
手把手教你做一个React Hooks (Todos)应用(一)
前端·react.js
叫我阿柒啊1 天前
从Java全栈到前端框架:一次真实面试的深度复盘
java·spring boot·typescript·vue·database·testing·microservices
小鱼儿亮亮1 天前
canvas中画线条,线条效果比预期宽1像素且模糊问题分析及解决方案
前端·react.js
小鱼儿亮亮1 天前
使用Redux的combineReducers对数据拆分
前端·react.js
烛阴1 天前
【TS 设计模式完全指南】用工厂方法模式打造你的“对象生产线”
javascript·设计模式·typescript
定栓1 天前
Typescript入门-类型断言讲解
前端·javascript·typescript