lio-mengxiang
【目录】组件库打包cli教程
理论基础
简单说，打包组件库，并不是打包，而是转译代码，平常我们说打包，例如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，就可以轻松编译。具体如何做，请看下方的文章。
代码技巧
以下文章包含了在实现mx-design-cli时，所用到的一些代码技巧
