【Contents】 CLI packaging tool tutorial of React component library

Question

【Contents】 CLI packaging tool tutorial of React component library

Opened this issue a year ago · 0 comments

Basic knowledge
Simply put, packaging a component library is not packaging, but translating code. Usually we say packaging, such as webpack, is to package our business code into one file, or split chunk into multiple files (each page only loads this page Required resources, such as js).

As for the packaged component library, because we need to load on demand, that is, each folder is actually a component. For example, the directory of the entire project is as follows:

src
  -- Button
      -- index.ts
      -- xxx
  --Modal
      -- index.ts
      -- xxx
index.ts // export all components

In the Button folder, we only need to translate it into js, and then the user only needs to

import { Button } from 'xxx'

You can only load the Button component, and other unused components are not loaded. So we don't need to package component library.

In fact, the "packaging" of components is far more complicated than we think. We need some theoretical basis to understand why and how to package component libraries, which is what this section wants to express. The following are some articles related to mx-design-cli, but also the basics related to "packaging" component libraries and creating development environment configurations.

I have basically realized the packaging effect with ant design (very well-known react ui component library), and all of them are packaged with glup. Many people here will ask, glup has not been maintained for several years, are you sure to use this? In fact, the main code of glup just forms a flow The code conversion API is essentially the stream of Node.js, and the stram API of Node.js is relatively stable in general, and there is no need for us to upgrade glup.

Instead, the core of glup is its plugin, such as the plugin converted by babel. As long as these plugins normally use a higher version of the conversion library, for example, babel uses version 7 (2023), it can meet our needs.

Then talk about why webpack is not suitable for packaging component libraries. The code after webpack packaging is as follows:

(function(modules) { // webpackBootstrap
	// The module cache
	var installedModules = {};
	function __webpack_require__(moduleId) {
    // ...省略细节
	}
	// 入口文件
	return __webpack_require__(__webpack_require__.s = "./src/index.js");
})
({

 "./src/index.js": (function(module, __webpack_exports__, __webpack_require__) {}),
  "./src/sayHello.js": (function(module, __webpack_exports__, __webpack_require__) {})
});

The key point is the webpack_require function, which is an implementation of webpack's commonjs specification require for node.js. This means that, in essence, webpack cannot export the packaged files as es modules, which is why many people use rollup when packaging libraries.

In fact, at present, some component libraries are packaged with rollup, such as Tencent’s tdesign. In fact, I later found out that what I do is almost the same as ant design, but the packaging speed is definitely not as good as glup. My component library is packaged in about 4 seconds. So I like glup very much.

Finally, glup can easily and finely control the content of each file, so some special requirements for component library packaging can be easily realized. For example, my component library css uses less, but users do not necessarily want to use less , I need to export the compiled css file, and the css is also loaded on demand. I can't package it into one file, so that it will be very troublesome for users to change the css of a component separately.

So I need to translate the less in the style directory into css and put it in the packaged folder. At the same time, sometimes some people also use less, and I also need to cpoy a less file to the same packaged style directory. . It is very simple to use glup for this kind of chores. You only need to judge whether the directory is style, and then judge whether the file suffix is .less, and you can easily compile it. How to do it, please see the article below.

Coding tricks

The following article contains some code techniques used when implementing mx-design-cli

Two advanced tricks in mx-design-cli code

Brief analysis of mx-design-cli source code

Brief analysis of mx-design-cli source code