Business component library

Why do YOU need a business component library

Status: There are inevitably too many pages in a toB project, which can lead to style issues, implementation issues, and one copy of code sticking around for changes (lots of code redundancy).

Solution: As shown in the above structure, combined with business precipitation components, improve reuse.

Business component library elements

  1. The ability to introduce on demand
  2. The ability to load as a whole
  3. Component document debugging capability

Business component library implementation

Having identified what the capabilities are, it’s time to start implementing them. Refer to the existing component library (element-Plus, ant-design-vue), which is introduced on demand using babel-plugin-Component, a one-sentence overview of the auto-complete resource path. In order to achieve the corresponding effect, our document structure should meet the official requirements.

- 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
Copy the code

How to package

"Build: lib - full", "cross - env LIBMODE = full webpack -- config. / build/webpack config. Js", / / packaging the whole library output "build: the esm - bundle" : "A rollup -- config. / build/rollup. Config. The bundle. Js && yarn build: type", / / packagingCopy the code

The execution code comes from Element-Plus, and we can see webPack used for packaging whole libraries and rollup used for packaging individual components. The choice here is more the difference between CommonJS and ESM. Because the configuration page that writes rollup supports the ESM specification. And it’s much simpler to use. Of course, now you can also export ESM packages using Webpack.

Webpack, Babel configuration page to focus on

  1. Because the business component library is secondary encapsulated on the component library, the component library, as well as the generic library, needs to be ignored during packaging to reduce package size
// webpack config page externals: {"ant-design-vue": "ant-design-vue", moment: "moment", lodash: 'lodash', vue: {root: "Vue", commonjs: "vue", commonjs2: "vue", amd: "vue" } }Copy the code
  1. Vue packaging JSX files is handled by the babel-plugin-transform-vue-jsx plug-in.

How to show it?

  1. Direct projects support a static website, page by page to write, existing large component libraries are basically done this way.
  2. We used storybook to support the presentation implementation with limited effort

Advantages of storybook

1. Not much configuration can run. 2. When writing the project, it can be directly supplemented without separate writing, and can serve as the development and debugging function.

  - componentA
    - index.js
    - style.css
    - index.stories.js
Copy the code

Storybook shortcomings

  1. 6. No useful popular science articles can be copied in x.x version.
  2. The document was hard to read and I had to go around to find the configuration implementation
  3. @storybook/vue, vue3 configuration not supported

1. It was mentioned above that those who want to use the business component library should first provide the component library (ANTD-Design, Element…).

.storybook
  - preview.js // The addon config config allows you to add extra preview configuration from within a preset
  - main.js
Copy the code
// preview.js preconfigures the environment to support import Vue from 'Vue' import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.less'; Vue.use(Antd);Copy the code
  1. The WebPack configuration (component library webPack configuration) should be copied to main.js

Thinking about business component libraries

  1. Business component libraries inevitably come with scenarios, so built-in requests are not uncommon, and the solution to this problem is to share HTTP instances without having one component library and one host.
  2. The premise of the business component library needs to extract the common methods and business methods of the master station into a library in advance to introduce support.

The final form of the project is as above. If there are any mistakes or mistakes, please comment on them downstairs

Refer to the address

  1. zhuanlan.zhihu.com/p/162072130
  2. Juejin. Cn/post / 684490…
  3. Github.com/element-plu…
  4. Storybook.js.org/docs/vue/co…