vue3+ts组件库发布npm并实现按需引入

原创

已于 2023-06-20 10:50:57 修改 · 4.3k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#npm #vue.js #javascript

于 2023-06-20 10:39:02 首次发布

本文介绍了如何创建一个Vue3+TS组件库，并实现通过npm按需加载。通过两种打包方案，详细讲解了从创建项目、设置打包命令到发布到npm的全过程。特别是按需加载的实现，利用babel-plugin-import插件简化了引入组件的步骤。

这里分两种情况来考虑打包我们的组件库：

整体打包：适宜包体积较小且使用时对于按需加载要求不是很高的项目（实现非常简单，无法按需加载）
按需加载打包：适宜包体积比较大或者子模块比较多，使用时需要使用到按需加载（实现相对复杂，能按需加载）

综上，我们最终采用第二种方式按需加载，这里对第一种方案也做一下介绍及实现

创建一个空项目

将组件相关代码移入新项目中，并保证组件能正常的使用

方案一

创建打包命令及入口文件

3、新建packages/index.ts

注册并导出所有组件

import BaseForm from '../src/components/BaseForm/index'
import BaseInput from '../src/components/BaseForm/components/BaseInput'
import BaseNumber from '../src/components/BaseForm/components/BaseNumber'
import BaseSelect from '../src/components/BaseForm/components/BaseSelect'
import BaseRadio from '../src/components/BaseForm/components/BaseRadio'
import BaseCheckbox from '../src/components/BaseForm/components/BaseCheckbox'
import BaseDate from '../src/components/BaseForm/components/BaseDate'
import BaseDateRange from '../src/components/BaseForm/components/BaseDateRange'
import BaseNumberRange from '../src/components/BaseForm/components/BaseNumberRange'
import BaseCascader from '../src/components/BaseForm/components/BaseCascader'
import BaseSwitch from '../src/components/BaseForm/components/BaseSwitch'
import BaseText from '../src/components/BaseForm/components/BaseText'
import BaseTable from '../src/components/BaseTable/index'
const components = [BaseForm, BaseTable, BaseInput, BaseNumber, BaseSelect, BaseRadio, BaseCheckbox, BaseDate, BaseDateRange, BaseNumberRange, BaseCascader, BaseSwitch, BaseText] // 组件集合
// const components = [BaseForm, BaseInput] // 组件集合
const install = function(Vue) {
  // 注册所有的组件
  components.forEach((item) => {
    Vue.component(item.name, item)
  })
}
// 如果是直接引入文件,就不用调用Vue.use()
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}
export default { install } // 必须要有导出
export {
  BaseForm as bsForm,
  BaseTable as bsTable,
  BaseInput as bsInput,
  BaseNumber as bsNumber,
  BaseSelect as bsSelect,
  BaseRadio as bsRadio,
  BaseCheckbox as bsCheckbox,
  BaseDate as bsDate,
  BaseDateRange as bsDateRange,
  BaseNumberRange as bsNumberRange,
  BaseCascader as bsCascader,
  BaseSwitch as bsSwitch,
  BaseText as bsText,
}

4、修改package.json