【目录】组件库打包cli教程

[lio-mengxiang]

理论基础

简单说，打包组件库，并不是打包，而是转译代码，平常我们说打包，例如webpack，是将我们的业务代码打包为一个文件，或者split chunk为多个文件（每个页面只加载这个页面需要的资源，比如js）。

而打包组件库，我们因为要做按需加载，也就是每个文件夹内其实是一个组件，比如整个项目的目录如下：

src
 -- Button  
     -- index.ts
     -- xxx
 -- Modal
     -- index.ts
     -- xxx
index.ts //  导出所有组件

其中Button文件夹，我们只需要转译为js,然后用户只需要

import { Button } from 'xxx'

就可以只加载Button组件，其它没有用到的组件不加载。所以我们不需要打包组件库。

实际上组件的“打包”远比我们想的要复杂，我们需要一些理论基础去理解为什么，以及如何打包组件库，这是这个小节想要表达的。以下是一些文章，跟mx-design-cli相关，也是跟"打包"组件库和创建开发环境配置相关的基础知识。

我基本实现了跟ant design的打包效果，其中都是用glup去打包，这里很多同学就会问了，glup已经几年没维护了，确定用这个?其实glup主体代码只是形成了一种流式转换代码的API，本质上就是Node.js的stream流，并且Node.js的stram api总体已经比较稳定了，我们glup其实也没什么升级的必要。

反而glup的核心是他的plugin，比如babel转换的plugin，只要这些plugin正常使用了高版本的转换库，比如babel使用7版本（2023年），就可以满足我们的需求。

然后再谈谈为什么webpack不适合打包组件库，webpack打包后的代码如下：

(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__) {})
});

关键点在于__webpack_require__这个函数，它是webpack对于node.js的commonjs规范require的一种实现。这就意味着，本质上webpack无法将打包后的文件导出为es module，这也是为什么很多人打包库都会用rollup。

其实目前来看，有些组件库是用rollup打包的，例如腾讯的tdesign,其实后来我发现做的事，跟ant design几乎一致，但是打包速度肯定不如glup，我的组件库打包，4秒就好了，所以我是很喜欢glup的。

最后，glup可以很简单的、精细的控制每个文件的内容，所以对于组件库打包的一些特殊要求，就可以轻松实现，比如说我的组件库css用的less，但是用户不一定想用less，我就需要导出编译后的css文件，同样css也是按需加载的，我不能一股脑打包成一个文件，这样用户想单独改一个组件的css会非常麻烦。

所以我需要把style目录下的less转译为css后放到打包后的文件夹里，同时，有时候有些人也用less，我还要cpoy一份less文件也到同样的打包后的style目录下。这种杂事用glup非常简单，只需要判断一下目录是不是style，然后判断文件后缀是不是.less，就可以轻松编译。具体如何做，请看下方的文章。

• react 组件库打包指南
• 命令行工具Command.js入门教程

代码技巧

以下文章包含了在实现mx-design-cli时，所用到的一些代码技巧

• mx-design-cli两个高级代码技巧

mx-design-cli源码解析

• mx-design-cli源码简要分析

[tongge666]

学习了，正好想学习一下组件库是如何搭建起来的

[lio-mengxiang]

学习了，正好想学习一下组件库是如何搭建起来的

这里是关于组件库打包的教程哦，组件库在另外一个仓库