从零开始搭建一个组件库(一)


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

一、使用 vite 创建项目

示例:

# npm 6.x
npm init [email protected] my-vue-app --template vue

# npm 7+, 需要额外的双横线:
npm init [email protected] my-vue-app -- --template vue

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

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

二、修改成库模式打包

项目打包文件是直接在 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 模块全局导入使用

下一步,执行 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,
  // ...
}

三、总结

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

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

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


猜你喜欢

转载自blog.csdn.net/weixin_43523043/article/details/126802529