我们公司目前是有多个前端团队分布在全国各地，如何才能把项目中的公共组件构建成一个 npm 包，发布出去呢？
我这里选的是 Rollup 构建工具，首先要做的就是构建适配，比如说应用构建（有可能是 webpack、vite等）包含了 tailwindcss、svgr 等等，Rollup 也需要支持这些，适配好了以后构建出来的模块才能和应用行为一样。
我的打算是让开发者提供一个 input 的 glob 选项，然后将这个 input 里的所有文件分别打包成一个 npm 包，也就是说，我们期望打包出来的效果是这个样子：
这里就有几个问题需要解决：
- 文件结构：如何打包分享的模块文件到不同的文件结构中 （方便发布）
- 描述文件生成：生成每个模块的 package.json 等相关文件
- 导入路径重定向：代码里有一些导入路径需要重定向
文件结构
由于 Rollup 的 input 选项可以影响打包后的目录结构，如果需要定制化组件的输出目录结构，那么修改 input 选项是必要的， 这里使用一种将文件路径映射成模块名称的算法，比如：
- src/components/actions.tsx -> @app-xxx/components-actions
- src/pages/form/components/a/index.tsx -> @app-xxx/form-components-a
此外，还需要设置 output.enentryFileNames 为 [name]/index.js，这样 src/components/actions.tsx 文件就会被打包到 @app-xxx/components-actions/index.js
描述文件生成
生成 package.json 我们需要获得当前模块的即将发布的版本号和依赖项.
模块当前的版本号获取可以使用 npm view 命令来获取。
当前发布版本，可以使用 semver npm 库来进行增加
依赖项的生成
- 生成 external match： 使用当前应用的 package.json 文件里的 dependencies 、peerDependencies 和分享模块列表，总共三部分组成一个字符串数组，构建正则表达式来匹配导入路径
- 使用导入路径来匹配：Rollup 在每个模块构建后会生成一个 output 对象，这个对象中的 imports 数组可以用来匹配正则
导入路径重定向
如果不加处理，我们会发现打包后的代码长这样
我这里用了一个简单粗暴的办法，使用正则来替换文件内容
结尾
- 最终是实现了一个 Rollup 插件来处理以上过程，后续有空可以把这部分与业务无关的代码放到 Github。
- 除了提取项目中的公共组件，我们还需要让其他团队成员看到 npm 仓库中有哪些组件，最好是还能实现预览效果
- 最后我是使用了 Storybook 加上以上功能写了一个组件分享平台，用 Storybook 中的 CSF 概念来做为分享平台的组件分享单元，提供一个网页看版，列出所有应用分享的组件和预览效果，这部分内容较多，后续有空的话可以分享出来