Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to build a simple component library". In the daily operation, I believe that many people have doubts about how to build a simple component library. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to build a simple component library"! Next, please follow the editor to study!

Component library division

In order to design a flexible and easy-to-use component library, the first step is to divide the components reasonably, the granularity of the components is fine enough and the boundaries are clear enough, so that the components can be reused to the maximum extent.

From a diagram to introduce the differences between the various components, basic components, that is, components that are independent of business functions, such as components provided in antd/fusion, upload, dialog, and so on. But these basic components are far from enough.

For example, you may often encounter scenarios like this:

Front-end development: designers have built a "new wheel", why not use the basic style of fusion or antd? Designer: "I think this basic style has no soul. I think it looks better this way."

At this point, business components are useful. At this point, you can use the basic components of fusion or antd to re-package to form the unique components of your own products, also known as "components in the unique domain of the business".

But in fact, there are still many scenarios that may change frequently. If you develop a component, the parameters passed in it may change constantly, and you can directly use "blocks" to implement them at this time. Provide a component code template directly, let the user copy and paste directly, and then modify his content in it.

A little higher, the page level, also known as the template, such as the "login page", may change uncontrollably between different products, the middle part of the login page can not be controlled, that can directly provide a page template for the user to use directly, such as the page template [1].

Well, from the above, we know which components to use in which scenarios, and knowing how to divide components can make our component library more flexible and powerful, so let's talk about how to develop a component.

Component developer designer: well, the spacing here should be changed from 14px to 16px, and then the font color should be changed to * front-end developer: I ….

Does a front end have to adjust the style here every day? That's too boring. At this point, a topic variable is very important.

1. Subject variable

We can make an agreement with the designer in advance, such as the size of the main font and what the main color is, and then the designer will produce the manuscript according to the set variables.

In this way, the front end connects with the designer through a scss variable to build a website with theme configuration, as follows [fusion theme configuration]. When developing business components, inject the relevant variables of the site configuration.

The designer can set the variable he wants here, and finally generate the corresponding scss variable, as shown in the screenshot below:

After the following operation flow, in the actual project, the front-end development only needs to recompile the build project to modify the component style, which is really liberated from the style.

Well, in addition to the css style, there are a few things to pay attention to when making a component.

two。 How to minimize the size of a npm package umd-> esm configure peerDependencies. "peerDependencies": {"react": "> = 16.12.0", "react-dom": "> = 16.12.0"}

As configured above, you can make the node_modules under the component library not to install react, and specify the version of react/reactDOM to be installed by the user of the component library.

Configure the corresponding externals3. Document generation

I have shared an article about the automatic generation of react documents before. If you are interested, you can take a look at it.

4. Commit specification & changelog generation

First, use the husky plug-in to add hooks during the pre-commit phase to limit the git commit information submitted by the project.

After that, we use the conventional-changelog [2] plug-in to filter and refine the historical commit information and automatically generate a unified planning CHANGELOG file.

5. Get through to the designer & the front-end tool

If the front end is buried in building wheels, believe me, your designer still won't let you go, because he doesn't know what wheels you've built.

So at this point, implement a sketch plug-in to synchronize the implemented components into the sketch plug-in, so that each time the designer can look at the existing components to drag and drop to generate the design draft. Greatly reduce front-end-designer communication. As shown below:

The implementation of a complete link above can greatly improve the development efficiency of the front end. However, if a company wants to build such a complete component library from 0, it must invest a lot of manpower. At this time, you can go to fusion to have a look, there is everything on it.

At this point, the study on "how to build a simple component library" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.