业务组件库咋搞呀

为什么需要业务组件库

现状：一个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"
    }
  }

2. 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);

2. 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…