}
}
提取组件中的样式文件，单独打包
Css-in-js的开发方式固然是方便许多，但是在打正式包时，内嵌的css实际会占用更多的代码体积，并且node_modules里的js代码中如果有显式require css的语句时，在同构项目中，可能会遇到服务端解析css文件的各种问题。
为了解决这个问题，我们提取了所有组件的css进行单独打包。其中所有的基础组件样式，会整体打包成一个main.css；而复杂业务组件的样式，则会以组件为单位进行单独打包，以便实现后续流程中业务组件的按需加载。
三、组件库实现业务组件的按需加载
与各大知名的开源组件库类似，为了减少项目的打包体积，我们对组件库中的复杂业务组件，如航班组件、机场组件、城市选择组件等，设计了按需加载的模式。
对RN而言，我们直接利用了require的特性，通过修改导出对象的get方法，显式地声明了lazyLoad的组件程式。
module.exports = {
//按需动态加载的模块
get AddressList() { return require(‘./Address/List’).default; }
};
对于Web而言，我们采用了类似ant-design的方式，在前面对业务组件的css进行单独打包处理后，通过在项目中引入babel插件的方式，实现组件的按需加载。
import { Address } from ‘@ctrip/thanos-ctrip-mobile/components.biz’
/*
- 等价于
import Address from ‘@ctrip/thanos-ctrip-mobile/components.biz/Address’
import ‘@ctrip/thanos-ctrip-mobile/components.biz/Address/style.css’
*/
四、解决组件库日渐臃肿问题
随着组件库的不断迭代，组件代码会不断增多，需求也会越来越复杂。其他研发同学也可能会开发独立的npm组件包，但是会基于已开发完成的组件库的部分功能来实现。
这种情况下，开发其他npm包的同学，可能只想使用当前已有库中的部分功能，而不太愿意引入一个完整而庞大的组件库。为了使组件库的功能更加独立且通用，让UI组件与功能模块之间更好地解耦，我们需要对组件库进行拆子包处理。
如组件项目中基础UI部分，从组件库中剥离，拆分成独立的ui-basic组件库；组件项目中工具方法（表单校验、环境判断、正则处理、时间日期格式化等），拆分成独立的 util库。这种拆分组件包的开发形式，组件库不再是所有功能都揉在一个仓库中，开发和维护将变得更加灵活且易于扩展。
拆包前，core的部分将随着功能的增加而越来越臃肿：
拆包后的结构：
如图所示，拆分独立功能包后，可以让我们扩展和组合出更多灵活多样的组件库，让组件库不再单一而臃肿。
五、解决子组件包的开发环境问题
拆分子组件包后，给组件库的多样性扩展带来了极大的便利，但随之而来的问题便是，每一个子组件包都需要单独维护，在开发子组件包时，每一个包都需要一个可运行的本地开发环境。
随着子组件包的数量逐渐增多，给每一个包都单独设立一个开发环境，必然会带来更大的维护成本。我们目前选择的解决方案是，对于粒度更细的子组件包，所有的子包会公用一套dev的开发仓库，通过 git modules在开发仓库中嵌套子模块仓库，实现了只维护一套开发环境，产出多个子模块包的组件库工厂。
在这种环境下，还可以做到当子模块之间存在相互依赖时，可以直接引用相对路径下其他模块的源码，不必为了调试某个模块的代码，而跑到node_modules里去翻找，徒增调试难度。
六、组件库文档化与协同开发
为了让组件库的开发流程更加规范，减少接入方的沟通成本，对组件库进行适当的文档梳理是十分必要的，我们使用gitbook 编写组件库的文档，并部署到公司内部的books平台上。同样借助于gitlab强大的web hook的能力，实现了文档仓库的自动更新与发布。
与此同时，我们也启用了协同开发的模式，让组件库成为一个内部的开源库，用车产线的研发同学，可以通过提交issuse和merge request的方式，自行对组件库中的个别需求进行开发，提升开发效率。
七、组件库单元测试、自动化与持续集成
单元测试
当组件库在开发和交付流程上趋于完善后，在公司G2战略背景下，为了保证代码的高质量，我们开始在组件库中接入自动化单元测试。接入单元测试也是一项十分曲折的过程。在测试技术框架的选型上，综合考虑了当前技术栈、框架市面通用性等多种因素，最终选择如下：
测试框架：Jest
选取原因：对React技术栈友好，同时也是React-Native官方推荐的测试框架
测试库：
web端 -> @testing-library/react
RN ->@testing-library/react-native
选取原因：React的官方测试库，对hooks类型的组件支持度高，选择这两个库，也是为了能够保持后续与react官方版本更新的同步
自动化与持续集成
在接入单元测试后，我们依然借助gitlab的CI/CD，对整个组件库的流程进行自动化构建与持续集成交付，在内置CtripDevOps或者自定义gitlab-ci.yml的配置下，我们将单元测试的环节加入到了pipeline中，同时通过公司统一的sonar检测，提供最终的组件库质量统计报告。
八、结语
要搭建一个相对完善的组件库，都是需要经过一系列项目的沉淀的。目前而言，组件库的开发流程上依然会存在一些问题，比如版本管理、升级回退等。时间是最好的老师，相信在后面的迭代中，我们依然能够保持初心与热情，积极探索与发现，构建出更加完善的前端工程体系。
【推荐阅读】
最后
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
[外链图片转存中…(img-fbS5F9h0-1720117312725)]
[外链图片转存中…(img-8K60DSOr-1720117312727)]
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
