业务组件库了解一下

2,188 阅读3分钟

业务组件库咋搞呀

为什么需要业务组件库

结构图

现状:一个toB项目内无可避免会涉及页面过多,如果各有各写会产生样式问题,实现问题,一份代码到处黏贴进行修改(代码大量冗余)。

解决办法:如上图结构,结合业务沉淀组件,提高复用度。

业务组件库要素

  1. 按需引入的能力
  2. 整体加载的能力
  3. 组件文档调试能力

业务组件库实现

确定了有什么能力,接下来就开始实现了。 参考现有的组件库(element-plus,ant-design-vue),按需引入都会用到babel-plugin-component,一句话概述自动补全资源路径。 为了实现对应的效果我们的文件结构就要符合官方需求。

- lib // 'libDir'
  - index.js // or custom 'root' relative path
  - style.css // or custom 'style' relative path
  - componentA
    - index.js
    - style.css
  - componentB
    - index.js
    - style.css

如何打包

    "build:lib-full": "cross-env LIBMODE=full webpack --config ./build/webpack.config.js", // 打包整个库输出
    "build:esm-bundle": "rollup --config ./build/rollup.config.bundle.js && yarn build:type", // 一个个打包

执行代码来自element-plus,我们可以看到打包整库的时候使用了webpack,打包单独组件的时候使用了rollup。 这里的选择更多是CommonJS和esm的区别。因为在写rollup的配置页是支持esm规范的。而且使用上更简洁。 当然现在你用webpack也可以打出esm包。


webpack,babel配置页要关注的点

  1. 因为业务组件库是在组件库上进行二次封装的,所以在打包的时候需要忽略组件库,以及通用库,减少包体积
// webpack config 页
  externals: {
    "ant-design-vue": "ant-design-vue",
    moment: "moment",
    lodash: 'lodash',
    vue: {
      root: "Vue",
      commonjs: "vue",
      commonjs2: "vue",
      amd: "vue"
    }
  }
  1. vue打包jsx文件需要插件babel-plugin-transform-vue-jsx处理。

如何展示?

  1. 直接项目内支持一个静态网站,一个个展示页面去写,现有的大型组件库基本都是这样子去做。
  2. 在有限的精力底下我们采用storybook去支持展示实现

storybook优点

1.配置不多就能跑起来。 2.在写项目的时候可以直接补充不用分离去写,可以充当开发调试职能。

  - componentA
    - index.js
    - style.css
    - index.stories.js

storybook缺点

  1. 6.x.x版本基本搜不到有用的科普文抄抄。
  2. 文档难读,找了一圈才发现配置实现
  3. @storybook/vue,未支持vue3配置

storybook展示难点 1.上面提及要使用业务组件库的人要先提供组件库(antd-design,element...)

.storybook
  - preview.js // The addon config config allows you to add extra preview configuration from within a preset
  - main.js
  // preview.js 提前配置环境支持
  import Vue from 'vue'
  import Antd from 'ant-design-vue';
  import 'ant-design-vue/dist/antd.less';


  Vue.use(Antd);
  1. webpack配置(组件库的webpack配置)要copy一份到main.js

业务组件库的思考

  1. 业务组件库无可避免会带一些场景,所以内置请求其实并不少见,要解决这种问题需要把http实例共享出来才不至于组件库一份,主站一份。
  2. 业务组件库的前提需要把主站的公用方法,业务方法提前抽取成一个库引入支持。

项目最终形态如上,如有写错或者写错希望大家楼下点评一下~

参考地址

  1. zhuanlan.zhihu.com/p/162072130
  2. juejin.cn/post/684490…
  3. github.com/element-plu…
  4. storybook.js.org/docs/vue/co…