前端工程记一次搭建业务平台组件库的过

北京治青春痘最好医院 http://m.39.net/pf/a_8736666.html
image.png前言

因业务平台扩大,组件越来越丰富,想通过抽离组件(包含功能组件,业务组件,基础组件)的方式分享给公司更多的小伙伴使用,所以有了这样的一次分享。????

接下来,我将对自己的这次所学所得做一次总结。

耐心看完,你将收获到:

通过什么方式进行项目管理如何搭建组件库的demo环境如何搭建组件库的开发环境如何搭建组件库编译打包生成资源的存放位置自动化将组件注册为全局组件如何实现按需引入约束规范如何将一个组件库发布到npm上通过什么方式进行项目管理背景

本着调研的目的去思考如何在开发一个组件库时,是将这些package放在一个仓库里维护还是放在多个仓库里单独维护?或者说一个仓库想基于多个不同框架开发的组件库,那么如何去管理呢?

那是将每个组件当成一个package进行管理(即多项目多仓库的形式,也称为Multirepo),还是用一个仓库去管理多个package(即Monorepo)

可能上述的表达有点抽象,用实例来看看两者的区别:

image.png解决

为了降低多package项目的维护成本,我使用lerna作为流程管理工具。

初始化Lerna项目:

//进入项目文件夹cdDDMC-UI-//初始化lernainit复制代码初始化之后,生成的项目结构如下:

DDMC-UI/packages/package.jsonlerna.json复制代码

lerna.json是为Lerna的管理配置文件,在搭建过程中我是采用的是lerna的固定模式。那什么是固定模式呢?

固定模式的Lerna项目是在一条单一的版本线上操作的,这个版本是在项目根目录的lerna.json文件中的version字段中控制的。当执行lernapublish时,如果一个模块自上次发布以来有更新,它将会更新为你要发布的新的版本,这意味着你只需在需要时发布新版本的package。

补全项目的目录,最终生成项目仓库如下:

DDMC-UI/config/example/app.jsindex.htmlpackages/demo1/index.vueindex.jsdemo2/index.vueindex.jsindex.jssrc/utils/


转载请注明:http://www.aierlanlan.com/rzgz/315.html

  • 上一篇文章:
  •   
  • 下一篇文章: 没有了