从零开始搭建一个组件库（一）

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、使用 vite 创建项目

示例：

# npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app -- --template vue
1
2
3
4
5
6
7
8
9
10
11

---

二、修改成库模式打包

项目打包文件是直接在 html 引入使用的，我们要构建发布 npm 版本需要改成库模式。

对应打包成库的入口，我们不需要创建应用挂载到节点，而是要考虑导出组件，导出组件需要考虑：

• 全局导入使用；
• CDN 引入使用；
• 按需导入使用；

对应1、2需要导出一个 Vue 插件，能够通过 Vue.use() 调用，这个实现就是通过导出 install 函数。而3只要导出组件即可。

import Button from './button'
import Layout from './layout'
import type { App, Plugin } from 'vue'

function isPlugin(item: any): item is Plugin {
  return item.install
}

export function install(Vue: App) {
  const components = [Button, Layout]
  components.forEach(item => {
    if (isPlugin(item)) {
      Vue.use(item)
    } else if (item.name) {
      Vue.component(item.name, item)
    }
  })
}

export { Button, Layout }
export default { install } // es 模块全局导入使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

下一步，执行 npm run build 打包可以看到生成3个文件 .es.js、.umd.js、style.css。

• .umd.js 一般使用在 CDN 引入。
• .es.js 使用在 esm 模块打包项目，现代打包工具能够通过 tree shaking 实现按需引入。
• style.css是项目下所有样式。

如果仅仅只是打包一个简单的组件库，这一步已经算完成了。接下来要进行发布 npm 需要配置 package.json。

// package.json
{
  // ...
  "main": "dist/bundle.umd.js",
  "module": "dist/bundle.es.js", // esm 导入模块入口
  "typings": "dist/main.d.ts",
  "sideEffects": false,
  // ...
}
1
2
3
4
5
6
7
8
9

---

三、总结

上面已经基本完成一个组件库的搭建，但是还存在一些问题：

• 没有 ts 声明，对 ts 不友好；
• CSS 文件没有按需加载；
• 旧版本打包工具不支持 npm 库的tree shaking（如webpack 4以下版本）；

针对这些问题，将在下一篇 从零开始搭建一个组件库（二）讲解如何解决。

---