Vue3 + Vite 构建组件库发布到 npm

你有构建完组件库后，因为不知道如何发布到 npm 的烦恼吗？本教程手把手教你用 Vite 构建组件库发布到 npm

搭建项目

1. 这里我们使用 Vite 初始化项目，执行命令：

   powershell 代码:

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

2. 这里以我的项目 vue3-xmw-table 为例
   
   

   文章基于 Vue3 + Element-plus 封装的 Table 组件

   前端开发 000 谢明伟

调整目录结构

1. 首先需要创建一个 packages 目录，用来存放组件
2. 将 src 目录改为 examples 用作示例

3. 启动项目的时候，默认入口文件是 src/main.js，将 src 目录改为 examples 之后，就需要重新配置入口文件，在根目录下创建一个 vue.config.js 文件

   javascript 代码:

   // vue.config.js
   module.exports = {
   // 将 examples 目录添加为新的页面
   pages: {
   index: {
     // page 的入口
     entry: 'examples/main.ts',
     // 模板来源
     template: 'public/index.html',
     // 输出文件名
     filename: 'index.html'
   }
   }
   }

4. 修改根目录入口文件 index.html 中的 main.ts 引入路劲

   html 代码:

   <script type="module" src="/examples/main.ts"></script>

5. 完整的目录结构如下：

组件开发

1. 之前我们创建的 packages 目录，用来存放组件
2. 该目录下存放每个组件单独的开发目录，和一个 index.js 整合所有组件，并对外导出
3. 每个组件都应该归类于单独的目录下，包含其组件源码目录 src，和 index.js 便于外部引用
4. 这里以组件 xmwTable 为例，完整的 packages 目录结构如下：

5. xmwTable/src/main.vue 就是组件的入口文件，这里有一点要非常注意：

<script lang="ts">
  export default {
 name: "vue3-xmw-table", //这个⾮常重要，就是未来你放到其他项⽬中，组件标签的名字，⽐如：<vue3-xmw-table></vue3-xmw-table>
  };
</script>

整合并导出组件

1. 编辑 packages/xmwTable/index.ts，实现组件的导出

   javascript 代码:

   // 导入组件，组件必须声明 name
   import XmwTable from './src/main.vue'
   
   // 为组件添加 install 方法，用于按需引入
   XmwTable.install = function (Vue: any) {
   Vue.component(XmwTable.name, XmwTable)
   }
   
   export default XmwTable

2. 编辑 packages/index.ts 文件，实现组件的全局注册

   javascript 代码:

   // packages / index.js
   
   // 导入单个组件
   import XmwTable from './xmwTable/index'
   
   // 以数组的结构保存组件，便于遍历
   const components = [
   XmwTable
   ]
   
   // 定义 install 方法
   const install = function (Vue: any) {
   if (install.installed) return
   install.installed = true
   // 遍历并注册全局组件
   components.map(component => {
      Vue.component(component.name, component)
   })
   }
   
   if (typeof window !== 'undefined' && window.Vue) {
   install(window.Vue)
   }
   
   export default {
   // 导出的对象必须具备一个 install 方法
   install,
   // 组件列表
   ...components
   }

编写 package.json 文件

1. package.json 文件里面有很多字段要填写，否则不能正确发布。最重要的是以下几个：
   name: 包名，该名字是唯一的。可在 npm 官网搜索名字，如果存在则需换个名字。
   version: 版本号，不能和历史版本号相同。
   files: 配置需要发布的文件。
   main: 入口文件，默认为 index.js，这里改为 dist/vue3-xmw-table.umd.js。
   module: 模块入口，这里改为 dist/vue3-xmw-table.es.js。

2. 完整的 package.json 如下：

   json 代码:

   {
   "name": "vue3-xmw-table",
   "version": "1.1.2",
   "main": "dist/vue3-xmw-table.umd.js",
   "module": "dist/vue3-xmw-table.es.js",
   "types": "vue3-xmw-table.d.ts",
   "files": [
     "dist/*",
     "vue3-xmw-table.d.ts"
   ],
   "private": false,
   "author": {
     "name": "baiwumm",
     "email": "843348394@qq.com"
   },
   "license": "ISC",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
     "@types/node": "^17.0.6",
     "element-plus": "^1.3.0-beta.1",
     "vue": "^3.2.26",
     "vue-router": "^4.0.12"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.0.0",
     "@vitejs/plugin-vue-jsx": "^1.3.10",
     "@vue/compiler-sfc": "^3.1.4",
     "eslint": "^8.6.0",
     "eslint-plugin-vue": "^8.2.0",
     "sass": "^1.45.2",
     "sass-loader": "^12.4.0",
     "typescript": "^4.4.4",
     "vite": "^2.7.2",
     "vue-tsc": "^0.29.8"
   }
   }

vite 打包配置

1. 因为组件库一般都是 jsx 语法编写，所以要加上 @vitejs/plugin-vue-jsx，打包成 lib，编辑 vite.config.ts：

   javascript 代码:

   // filename: vite.config.ts
   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import vueJsx from '@vitejs/plugin-vue-jsx'
   
   // https://vitejs.dev/config/
   export default defineConfig({
   plugins: [vue(), vueJsx({})],
   build: {
     rollupOptions: {
    // 请确保外部化那些你的库中不需要的依赖
    external: ['vue'],
    output: {
      // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
      globals: {
        vue: 'Vue',
      },
    },
     },
     lib: {
    entry: './packages/index.ts',
    name: 'vue3-table',
     },
   },
   })

2. 执行 yarn run build 会生成 dist 文件夹，里面有以下几个文件：

本地模拟

1. 修改文件 main.ts

   javascript 代码:

   import { createApp } from 'vue'
   import App from './App.vue'
   import router from './router'
   import ElementPlus from 'element-plus'
   import 'element-plus/dist/index.css'
   import XmwTable from '../dist/vue3-xmw-table.es.js'
   
   createApp(App).use(router).use(ElementPlus).use(XmwTable).mount('#app')

2. 若 vue3-xmw-table 组件能成功显示在页面，则证明组件的打包是没问题的。

发布到 npm

1. 先查看 npm 的 registry

   powershell 代码:

   npm config get registry

2. 设置 npm 的 registry 为官方源

   powerShell 代码:

   npm config set registry https://registry.npmjs.org

3. 执行命令 npm login 登录到 npm

   powerShell 代码:

   npm login

4. 执行命令 npm publish 发布到 npm

   powerShell 代码:

   npm publish

   如出现以下信息，则证明包发布成功:
   
   

   注：上传的 npm 包，在 72小时 后不可删除，如果是测试用的包，记得 72小时 内删除。

安装验证

1. 执行命令

   powerShell 代码:

   npm i vue3-xmw-table

2. 在 main.ts 引入并注册

   javascript 代码:

   import { createApp } from 'vue'
   import App from './App.vue'
   import router from './router'
   import ElementPlus from 'element-plus'
   import 'element-plus/dist/index.css'
   import Xmwtable from 'vue3-xmw-table'
   
   createApp(App).use(router).use(ElementPlus).use(Xmwtable).mount('#app')

3. 页面中引用

   html 代码:

   <!-- 数据表格 -->
   <vue3-xmw-table
     stripe
     border
     show-summary
     :summary-method="getSummaries"
     :tableData="state.tableData"
     :loading="state.loading"
     :columns="state.firstLoad ? firstColumns : state.tableColumns"
     :tableConfig="tableConfig"
     :showPagination="false"
     style="margin-top: 20px"
     :span-method="objectSpanMethod"
   >
     <template v-slot:handler="{ scope }">
    <el-button
      size="small"
      type="primary"
      @click="
        scope.$index == state.tableData.length - 1
          ? hanglerEditSpending(scope)
          : handlerEdit(scope)
      "
      >编辑</el-button
    >
    <el-button
      type="danger"
      size="small"
      @click="handlerDelect(scope)"
      :disabled="scope.$index == state.tableData.length - 1"
      >删除</el-button
    >
     </template>
   </vue3-xmw-table>