网站LOGO
白雾茫茫丶
页面加载中
6月25日
网站LOGO 白雾茫茫丶
记录学习、生活和有趣的事
菜单
  • 白雾茫茫丶
    记录学习、生活和有趣的事
    用户的头像
    首次访问
    上次留言
    累计留言
    我的等级
    我的角色
    打赏二维码
    打赏博主
    Vue3 + Vite 构建组件库发布到 npm
    点击复制本页信息
    微信扫一扫
    文章二维码
    文章图片 文章标题
    创建时间
  • 一 言
    确认删除此评论么? 确认
  • 本弹窗介绍内容来自,本网站不对其中内容负责。
    • 复制图片
    • 复制图片地址
    • 百度识图
    按住ctrl可打开默认菜单

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

    谢明伟 · 原创 ·
    前端开发技术分享 · ViteVuenpm
    共 7448 字 · 约 2 分钟 · 839
    本文最后更新于2023年12月28日,已经过了180天没有更新,若内容或图片失效,请留言反馈
    你有构建完组件库后,因为不知道如何发布到 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 目录结构如下:
    1. xmwTable/src/main.vue 就是组件的入口文件,这里有一点要非常注意:

    需要注意的是,组件必须声明 name,这个 name 就是组件的标签

    html 代码:
    <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
    1. 执行命令 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>

    组件正常显示,恭喜💐你,你的包已经发布成功拉,赶紧去使用吧🎉🎉

    声明:本文由 谢明伟(博主)原创,依据 CC-BY-NC-SA 4.0 许可协议 授权,转载请注明出处。
    我要发表评论 我要发表评论
    博客logo 白雾茫茫丶 记录学习、生活和有趣的事 51统计 百度统计
    MOEICP 萌ICP备20236860号 ICP 粤ICP备2023007649号 ICP 粤公网安备44030402006402号

    💻️ 谢明伟 5小时前 在线

    🕛

    本站已运行 2 年 176 天 11 小时 34 分

    🌳

    自豪地使用 Typecho 建站,并搭配 MyLife 主题
    白雾茫茫丶. © 2022 ~ 2024.
    网站logo

    白雾茫茫丶 记录学习、生活和有趣的事
     
     
     
     
     
     
     
     

    1

    1

  • 下一篇