前端类库开发最佳实践

2024-04-12 15:54:09

Yarn + Lerna + Rollup + 示例项目

Yarn

通过使用 Yarn 的工作区功能，让 Yarn 根据就依赖关系帮助你分析所有子项目的公共依赖，让所有的子项目的公共依赖只会被下载和安装一次。

Lerna

通过 Lerna 可以将一系列相互耦合比较大、又相互独立的库进行管理，它解决各个库之间修改混乱、难以跟踪的问题，优化开发工作流。同时，Yarn 会帮你 link 好项目之间的依赖关系，你只需要在各个项目的 package.json 中配置好 dependencies 即可。

Rollup

使用 rollup 实现通过简单的配置，生成类库的 esm、lib 版本。

示例项目

通过示例项目展示类库的功能、使用方式。

至此，我们已经把 依赖安装 -> 库开发 -> 库发布 -> 功能介绍的整个类库的开发流程串了起来！

项目结构大致如下：

├─packages
│ ├─core
│ ├─package1
│ ├─package2
│ ├─package3
│ ├─playgorund(private)
│ └─shared
├─lerna.json
└─package.json

关于示例项目（react）

我们希望在开发的时候能时时的验证类库的各个功能，此时一个类库示例项目必不可少少。示例项目的难点在于如何引用类库项目、以及如何在类库代码更改后热更新。
首先，lerna 在项目进行 bootstrap 后会帮你把各项目的依赖 link 好；
其次，热更新，可以通过使用 webpack 的 alias 功能，将所引用的类库指向类库的 src 本部，这样更改类库源码的时候就会热更新。

使用 cra 创建的示例项目

可使用 react-app-rewired + customize-cra 更改 webpack 配置，此时，如果 alias 超出示例项目的 src 目录，会报错 outside of src directory 错误；此时你需要 react-app-rewire-alias 来添加 alias。使用 Yarn 工作区功能可以避免报 invalid hook call 的问题

最后，你也可以不是使用示例项目，通过使用 bookstores 的方式也是一个不错的选择。

引用

[1] Yarn
[2] Lerna
[3] Rollup
[4] Webpack
[5] react-app-rewired
[6] customize-cra
[7] react-app-rewire-alias

前端类库开发最佳实践相关推荐

web前端开发最佳实践_学习前端Web开发的最佳方法
web前端开发最佳实践为什么要进行网站开发? (Why web development?) Web development is a field that is not going anywhere ...
Web前端开发最佳实践（8）：还没有给CSS样式排序？其实你可以更专业一些
前言 CSS样式排序是指按照一定的规则排列CSS样式属性的定义,排序并不会影响CSS样式的功能和性能,只是让代码看起来更加整洁.CSS代码的逻辑性并不强,一般的开发者写CSS样式也很随意,所以如果不借 ...
《Web前端开发最佳实践》——1.2　Web前端开发现状
本节书摘来自华章计算机<Web前端开发最佳实践>一书中的第1章,第1.2节,作者:党建更多章节内容可以访问云栖社区"华章计算机"公众号查看. 1.2 Web前端开发 ...
【Web前端开发最佳实践系列】前端代码推荐和建议
一.常用的前端文件的组织结构: 1.js (放置JavaScript代码) lib(放置框架JavaScript文件) custom.js 2.css(放置CSS样式代码) lib(放置框架CSS文件 ...
Web前端开发最佳实践（3）：前端代码和资源的压缩与合并
一般在网站发布时,会压缩前端HTML.CSS.JavaScript代码及用到的资源文件(主要是图片文件),目的是加快文件在网络中的传输,让网页更快的展现.当然,CDN分发.缓存等方式也是加快代码或资源 ...
web前端开发最佳实践_Web开发人员和设计师的最佳黑色星期五优惠
web前端开发最佳实践 As Black Friday 2016 is here, we thought that web developers and web designers should al ...
前端性能优化最佳实践（转）
转载请注明: 转载自WEB前端开发(www.css119.com)-关注常见的WEB前端开发问题.最新的WEB前端开发技术(webApp开发.移动网站开发).最好的WEB前端开发工具和最全的WEB前端 ...
GMTC 大前端时代前端监控的最佳实践
摘要: 今天我分享的内容分成三个部分: 第一部分是"大前端时代前端监控新的变化", 讲述这些年来,前端监控一些新的视角以及最前沿的一些思考. 第二部分"前端监控的最佳实践 ...
前端代码标准最佳实践：CSS篇
上一篇<前端代码标准最佳实践:javascript>发表后,大家讨论还是很热烈,从侧面体现了前端工程师对写标准的前端代码的重视程度很高.这些最佳标准实践并不是那个权威组织发布的,而是由大量 ...

最新文章

热门文章