|
业务的开发效率。但是我发现埋在明确需求之后，开始调研技术方案时，很多同学并不清楚要调研哪些技术点，怎么找到某个具体方向的解决方案，找到方案之后都需要试哪些case, 以及怎么把这些方案集成在一起等等。
其实不用想那么复杂，你只需要按照以下三个技术实现的关键点搞定就可以了。
你一定觉得这三个点还是太宏观了，不好理解，所以接下来，我就分别介绍这三个关键点到底是什么。你可以参考这些关键点来进行相关技术调研
一. 业务组件库的整体架构设计
对于业务组件库的整体架构设计而言， 核心问题是业务组件库的代码时如何来组织和管理 。
首先，我们把代码仓库建好。业界一般会把同一类组件库用单个仓库的形式维护，并且把组件开发成NPM包的形式，这里的重点是，**你要考虑把所有的组件打包成一个大的NPM包，还是分割是一个个独立的小NPM包 。**不要小看这个问题， 这两种选择会使仓库的目录结构有不小的差异，进一步又会影响到后面组件的开发，构建，发布，实现的技术设计
单包架构
是什么
如果你选择把所有的组件看成一个整体，一起打包发布。这叫最大的优点是可以通过相对路径实现组件与组件的引用，公共代码之间的引用。
缺点
缺点就是组件完全耦合在了一起，必须把它作为一个整体统一发包。就算只改一个组件的一个非常小的功能，都要对整个包发布更新。
比如说 Antd，它就是作为一个整体的包来尽进行管理的。选择使用单包架构的话，那么你就必须提供按需加载的能力，以降低使用者的成本，你可以考虑支持 ES Modules 的 Tree shaking 的功能来实现按需加载的能力。当然你也可以选择另外一种方案，叫做"多包架构"
多包架构
是什么
每个组件彼此独立，单独打包发布，单个仓库多个包，统一维护单独管域，我们一般使用第三方库 Lerna 来维护这样的架构，Lerna针对包之间有依赖的场景做了一些特殊优化，开发模式下，它会把所有存在依赖关系的包通过软链的形式连在一起，就可以很方便的本地开发联调。所以这就要求你考虑清楚，
二. 业务组件库的基础技术能力
当你确定了整体架构之后，就可以开始具体的功能点实现了。业务组件库要求整体框架提供五点基础的技术能力
1. 构建能力
这需要我们可以提供构建产物的能力，这里有很多选择，可以选择Webpack，Rollup Glup Grunt..... 构建组件库推荐Rollup， 构建项目推荐Webpack. 这里需要特别注意产物的格式要求，像我们常用的cjs, esm,umd格式。
-
比如说如果你的组件考虑支持 node环境， 像需要支持SSR, 你就需要打包出 cjs格式的代码
-
如果你的组件考虑支持 <script > 标签引用，, 你就需要打包出 umd格式的代码
然后就需要在对应的构建工具里进行配置
除此之外，还有几个非常容易遗漏的点，比如说
-
组件库Bable的配置是否与项目中Babel的配置重复
-
依赖包是打包到产物中，还是使用项目中的依赖包。如:lodash, moment...
-
依赖包的样式是否打包到产物中以及Polyfill的配置(这里以后再开一篇详细说明吧:joy:)
2. 文档
你需要提供一个可以实时运行的文档服务。包括支持静态内容的展示，以及可以查看源码的实施运行效果，这方面有很多优秀的开源库,比如 StoryBook&Styleguidist，Docz
这里你需要注意一个典型的错误行为，那就是调研的时候，只调研一些基础的功能就开始做选择，这样很容易给后面挖坑，你需要考虑尽可能多的情况。比如
-
有内部状态的代码示例能不能支持，例如弹窗类的组件，就需要在示例中做显示状态的切换
（编辑：烟台站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
