如何发布自己写的Vue3组件到NPM上？

CV大法好

我们作为一个前端人，CV工程师，用别人写好的东西可谓是手到擒来😏，用现有的东西可以极大的提升开发效率，像我们写项目几乎必用的组件库，内置了很多组件，帮助我们快速开发

Ant Design Vue
Element Plus
Navie UI

上面是我们在用Vue3搭建项目时候常常用到的组件库，每个组件库都包含了大量的组件，很大程度上能够满足我们业务的需求

自己封装组件

大多数情况下，有少数场景需要我们自己封装组件，在项目中使用，这在一个项目中没有问题，但是可能好巧不巧，你在另一个项目中又要写一个类似的组件。你可能会把原来那个项目中的组件复制过来，或者自己再写一遍。

但其实我们有更好的方法，为什么不自己写一个组件，然后发到NPM上呢？不仅可以给自己使用，也能够分享给其他人

封装一个组件

比如说我们想封装一个组件，让其中的文字变成红色

<RedWrapper text="Hello World" />

渲染的效果：

让我们实现它

<!-- RedWrapper.vue -->
<script setup lang='ts'>
const { text } = defineProps<{
  text: string
}>()
</script>

<template>
  <div style="color: red">
      {{ text }}
  </div>
</template>

为了让安装这个组件，我们新建index.ts:

// index.ts
import { App } from 'vue'
import RedWrapper from './RedWrapper.vue'

function install(app: App) {
  app.component('RedWrapper', RedWrapper)
}
export default {
    install
}

迁移到已有的模版

主要编写就是上面两个文件，为了让组件能够更好的使用，我们还需要通过打包工具进行打包以及自动化测试。在这里，我提供了一个vue组件的模版，帮助你们更好的快速开发vue组件。运行：

$ npx degit peterroe/vue-component-starter RedWrapper
$ cd RedWrapper
$ pnpm i  #or npm install

修改src下MyComponent.vue的文件名为RedWrapper.vue，并将内容替换为上面RedWrapper.vue的内容
修改src/index.ts为上面编写的index.ts的内容
修改demo/App.vue的内容为：

<script setup lang="ts">
import RedWrapper from '../src/RedWrapper.vue'
</script>

<template>
  <div class="demo">
    <RedWrapper text="Hello World" />
  </div>
</template>

<style>
.demo {
  text-align: center;
}
</style>

调试运行：

$ pnpm dev # or npm run dev

访问http://localhost:3000，就可以边调试边开发

打包：

$ pnpm build

上面的命令会对我们的文件进行打包，打包后会生成

dist/index.es.js
dist/index.umd.js

发布到NPM上

发布之前，我们必须确保取一个独一无二的包名，包的名字就说package.json的name字段的值，我这里修改为：

{
    name: 'red-wapper',
    //...
}

发布：

$ npm logon # 如果没有登陆，请先登陆
$ npm publish  #执行发布命令

如果收到了如下的信息，代表发布成功了：

➜ npm publish
npm notice 
npm notice 📦  red-wrapper@1.0.0
npm notice === Tarball Contents === 
npm notice 9B      .eslintignore             
npm notice 26B     .eslintrc                 
npm notice 18B     .github/FUNDING.yml       
npm notice 499B    .github/workflows/test.yml
npm notice 15B     .prettierignore           
npm notice 86B     .prettierrc               
npm notice 129B    .vscode/extensions.json   
npm notice 224B    demo/App.vue              
npm notice 96B     demo/main.ts              
npm notice 281B    demo/vite.config.ts       
npm notice 157B    dist/index.d.ts           
npm notice 508B    dist/index.es.js          
npm notice 519B    dist/index.umd.js         
npm notice 515B    dist/RedWrapper.d.ts      
npm notice 359B    index.html                
npm notice 1.4kB   package.json              
npm notice 170.2kB pnpm-lock.yaml            
npm notice 2.4kB   readme.md                 
npm notice 41B     renovate.json             
npm notice 177B    src/index.ts              
npm notice 161B    src/RedWrapper.vue        
npm notice 480B    tsconfig.json             
npm notice 628B    vite.config.ts            
npm notice === Tarball Details === 
npm notice name:          red-wrapper                             
npm notice version:       1.0.0                                   
npm notice filename:      red-wrapper-1.0.0.tgz                   
npm notice package size:  66.0 kB                                 
npm notice unpacked size: 178.9 kB                                
npm notice shasum:        59875dd645aa5069e67dd1776376dc5a343c7a35
npm notice integrity:     sha512-IP7XtoUfTlmLH[...]56W9HYhuSzZBg==
npm notice total files:   23                                      
npm notice 
npm notice Publishing to https://registry.npmjs.org/
+ red-wrapper@1.0.0

提供他人使用

现在我们的包已经发布到了NPM上了，你可以在其他的项目中直接使用它，就像平时使用其他第三方组件一样，例如

$ pnpm i red-wrapper

修改入口文件index.ts/js:

import { createApp } from 'vue'
import App from './App.vue'
import RedWrapper from 'red-wrapper'  // 导入

createApp(App).use(RedWrapper).mount('#app')

关于模版

vue-component-starter是我为编写Vue组件提供的模版，提供了一下特性：

⚡️ 基于vite的开发和打包
✨ 通过pretty-quick自动格式化代码
🤙🏻 Eslint 支持
⚙️ 基于 Vitest的单元测试
🦾 TypeScript
🎈 通过 np更加严格的发布
📦 通过 gh-pages直接部署Demo

更多详情移步Github仓库