使用 vite 发布自定义组件到 npm

我正在参加「掘金·启航计划」

之前介绍了基本的npm发包步骤，发布了工具函数，纯 JS 文件，现在尝试用vite发布自定义组件

超详细如何发布自己的 npm 包

vite 初始化项目

#  创建项目
$ pnpm create vite vite-npm-package -- --template vue

# 运行项目
$ cd vite-npm-package
$ pnpm install
$ pnpm dev

编写按钮组件

操作：新建 packages/button 目录，在该目录下创建 src/index.vue 文件和 index.js 文件

packages/button/src/index.vue

<template>
  <button class="tButton">测试 发布 按钮组件</button>
</template>

<script>
  // name是必须要写的
  export default {
    name: "tButton",
  };
</script>

<style>
  .tButton {
    background-color: #1188ff;
    color: white;
    border: none;
    padding: 6px 12px;
  }
</style>

packages/button/index.js

import tButton from "./src/index.vue";

// 如果想通过CDN方式引入，需要编写install函数
// 注册组件
tButton.install = function (Vue) {
  Vue.component(tButton.name, tButton);
};

export default tButton;

本地测试使用组件

<template>
  <div class="demo">
    <t-button class="block" />
  </div>
</template>

<script setup>
import tButton from "packages/button/src/index.vue";
</script>

<style scoped></style>

打包配置

操作：在 vite.config.js 中进行打包配置，然后运行打包命令

打包配置，可见 Vite 官网中文文档之构建生产版本：cn.vitejs.dev/guide/build…

修改 vite.config.js 配置

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";

const resolve = (dir) => path.join(__dirname, dir);

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": resolve("src"),
      packages: resolve("packages"),
    },
  },
  build: {
    lib: {
      // 注意此处的路径要配置正确
      entry: resolve("packages/button/index.js"),
      name: "TButton",
      fileName: (format) => `tbutton.${format}.js`,
    },
    // 自定义构建配置，可直接调整底层Rollup选项；Rollup有一套预设
    // https://rollupjs.org/guide/en/#big-list-of-options
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ["vue"],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: "Vue",
        },
      },
    },
  },
});

运行打包命令pnpm build，打包效果如下所示：

打包后测试组件使用

<template>
  <div class="demo">
    <t-button />
  </div>
</template>

<script setup>
import tButton from "../../dist/tbutton.es.js";
</script>

<style></style>

发布 npm 包

操作：在 package.json 文件中进行 npm 发布的相关配置，然后进行 npm 发布操作

修改 package.json

{
  "name": "vite-npm-package",
  "version": "1.0.0",
  "description": "使用vite发布自定义组件到npm",
  "files": ["dist"],
  "main": "./dist/tbutton.umd.js",
  "module": "./dist/tbutton.es.js",
  "exports": {
    ".": {
      "import": "./dist/tbutton.es.js",
      "require": "./dist/tbutton.umd.js"
    },
    "./dist/style.css": {
      "import": "./dist/style.css",
      "require": "./dist/style.css"
    }
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "license": "MIT",
  "private": false,
  "author": "zptime",
  "dependencies": {
    "vue": "^3.2.23"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.10.2",
    "vite": "^2.7.0"
  }
}

按照之前的方式发布到 npm

注意：不要忘记每次更改发布都要更改版本号

// 控制台会返回下一个小版本号 如v1.0.1
npm version patch

// 重新发布
npm publish

发布后使用举例

安装依赖

pnpm i vite-npm-package

安装后效果：

使用

<template>
  <div class="demo">
    <tButton />
  </div>
</template>

<script setup>
  import tButton from "vite-npm-package";
  import "vite-npm-package/dist/style.css";
</script>

发布使用报错

报错信息：Internal server error: Failed to resolve entry for package "vite-npm-package". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "vite-npm-package". The package may have incorrect main/module/exports specified in its package.json.

报错解析：之前写的 tButton 组件中，没有设置 name 值，这个是必须要设置的

参考文档：

Vite 官网中文文档之构建生产版本