发布自定义 npm 组件包

创建 npm 包

1. 创建一个项目，并安装依赖

npm init vite-app <project-name>
cd <project-name>
npm i

2. 安装第三方插件

npm install element-plus --save
npm install @types/node --save-dev
npm install @vitejs/plugin-vue@5.0.4 -D
npm uninstall vite@5.2.0

3. 项目目录
   注意此处main.js入口文件只是当前项目入口文件，组件库打包的入口文件还是packages下的index.ts
   

4. 组件编写

<template>
  <div>
    <button class="btn" @click="clickFunc">{{ text }}</button>
  </div>
</template>

<script lang="ts">
export default {
  name: "CustomButton",
  props: ["text"],
  data() {
    return {
      name: "button",
    };
  },
  methods: {
    clickFunc() {
      this.$emit("clickButton", this.name);
    },
  },
  mounted() {},
};
</script>

<style scoped>
.btn {
  color: "blue";
}
</style>

5. 把Vue组件提成一个插件
   把组件提到src平级的文件夹中packages中，并且创建一个index.ts文件（通过index.ts 统一管理发布的组件）

   编写index.ts把组件改写成插件的导入方式：

//方法一：
import CustomButton from './CustomButton.vue';
 
// 把需要导出的组件统一提到这个公共文件，在项目的main.ts中导入
const components = [CustomButton];
export default (app: any) => {
    components.forEach(component => {
        app.component(component.name, component);
    });
}
// 方法二：
// 通过index.ts 统一管理发布的组件
import CustomButton from './CustomButton.vue';
const myPlugin = {
    install: (app: any)=>{
        app.component('CustomButton', CustomButton);
    }
}
 
export default myPlugin;

6. 编写编包脚本
   与src平级创建一个build文件夹，增加一个lib.config.ts

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

export default defineConfig({
  build: {
    outDir: "dist",
    lib: {
      entry: resolve(__dirname, "../src/packages/index.ts"),
      name: "chen-first-component", //对外暴露的组件名称
      fileName: (format) => `chen-first-component-${format}.js`, //umd（require导入方式） es(import导入方式)
    },
    rollupOptions: {
      // 不进行打包的组件
      external: ["vue"],
      output: {
        //针对于umd模式下为外部化依赖提供一个全局的变量
        globals: {
          vue: "Vue", //对应exter里的vue， 对于UMD模式导入后，可以使用Vue.xxx
        },
      },
    },
  },
  // 插件:需要把哪些文件打包成一个库文件
  plugins: [
    vue({
      // 包括哪些文件
      include: [/\.vue$/],
    }),
  ],
});

在package.json中增加编译命令

{
  "name": "chen-first-component",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "build:component": "vite build --config ./build/lib.config.ts"
  },
  "dependencies": {
    "element-plus": "^2.7.5",
    "vue": "^3.0.4"
  },
  "devDependencies": {
    "@types/node": "^20.14.2",
    "@vitejs/plugin-vue": "^5.0.4",
    "@vue/compiler-sfc": "^3.0.4",
    "vite": "^5.2.0"
  }
}

打包，生成dist文件

npm run build:component

在dist目录下初始化创建 package.json 包的配置信息

npm init -y

name：包名。
version：版本号，以后更新也要用到。
description：包的描述性文字。
main：包的入口文件，默认根目录的 index.js。
还有其它配置信息就不一一介绍了。
注意这里 name 要唯一，不能和已发布的包重名，你可以到官网（https://www.npmjs.com/）搜索是否已经有同名的包存在。

进行NPM发布

1. 在npm官网创建自己的账号并登录。
2. 在打包好的文件路径下：使用npm login会跳转到npm官网进行登录；执行命令后依次输入用户名、密码、邮箱，最终输出如下内容表示登录成功。

Logged in as timfan on https://registry.npmjs.org/.

3. 登录完成后，将镜像源改为npm官方：npm config set registry=https://registry.npmjs.org
4. 然后使用npm publish将包上传到npm仓库
   
5. 从npm下载包并进行测试
   将镜像切回到淘宝源：npm config set registry https://registry.npm.taobao.org
   查看当前镜像源：npm config get registry

npm i chen-first-component

测试

在 入口文件 main.js 中导入并使用我们自定义的组件。

//main.js
import { createApp } from "vue";
import App from "./App.vue";
import "./index.css";
import CustomButton from "./packages/index.ts";

createApp(App).use(CustomButton).mount("#app");

在 app.vue文件中使用并测试。

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3.0 + Vite" />
  <custom-button text="测试按钮" @clickButton="clickButton"></custom-button>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  methods: {
    clickButton(name) {
      console.log("点击了按钮", name);
    },
  },
};
</script>

根目录创建vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
  plugins: [vue()],
});

运行 npm run dev

6. 代码中使用包

//main.js
import TChen from "chen-first-component"; 
import 'chen-first-component/style.css'

const app = createApp(App);
app.use(router).use(TChen).mount('#app')

vue页面使用：

<script setup>
import { reactive } from 'vue'
</script>
 
<template>
  <t-chen text="测试按钮" @clickButton="clickButton"></t-chen>
</template>

7. 更新包
   后面如果我们需要对包进行升级，修改了包的代码后，同步发布更新到包管理平台 npm，需要修改 package.json 中 version 字段（版本号），这时还是执行

npm publish

参考链接

npm发布Vue组件
如何发布自定义 npm 组件包
使用vite+npm封装组件库并发布到npm仓库
vue造轮子完整指南–npm组件包开发步骤