快捷導(dǎo)航

vue3+vite自定義封裝vue組件發(fā)布到npm包的全過(guò)程

更新時(shí)間：2022年09月06日 10:39:51 作者：qq_184177677

當(dāng)市面上主流的組件庫(kù)不能滿足我們業(yè)務(wù)需求的時(shí)候,那么我們就有必要開發(fā)一套屬于自己團(tuán)隊(duì)的組件庫(kù),下面這篇文章主要給大家介紹了關(guān)于vue3+vite自定義封裝vue組件發(fā)布到npm包的相關(guān)資料,需要的朋友可以參考下

創(chuàng)建項(xiàng)目

“vue”: “^3.2.8”
“vite”: “^2.5.2”

習(xí)慣用HB的直接用創(chuàng)建vue3項(xiàng)目即可或

npm init vite@latest

創(chuàng)建組件

打開項(xiàng)目在src/components文件夾下新增文件,我這里叫TestBtn.vue

<template>
  <button>我是測(cè)試要發(fā)布的按鈕組件</button>
</template>
 
//導(dǎo)出組件名*
<script>
	export default{
		name:'test-btn'
	}
</script> 
<script setup>

</script>
 
<style>

</style>

拿到當(dāng)前項(xiàng)目里測(cè)試一下

//app.vue
<template>
	<div>
		<test-btn></test-btn>
	</div>
</template>

<script setup>
import TestBtn from './components/TestBtn.vue'
</script>

<style scoped>

</style>

導(dǎo)出組件

src下新建index.js

//index.js
import TestBtn from "./components/TestBtn.vue"; // 引入封裝好的組件

export { TestBtn } //實(shí)現(xiàn)按需引入*


const components = [TestBtn];
const install = function(App, options) {
	components.forEach((component) => {
		App.component(component.name,component);
	});
};
export default { install } // 批量的引入*

使用vite構(gòu)建

編輯vite.config.js文件,新增build屬性，vite中文文檔

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/index.js'),
      name: 'TestBtn',
      fileName: (format) => `test-btn.${format}.js`
    },
    rollupOptions: {
      // 確保外部化處理那些你不想打包進(jìn)庫(kù)的依賴
      external: ['vue'],
      output: {
        // 在 UMD 構(gòu)建模式下為這些外部化的依賴提供一個(gè)全局變量
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

修改package.json文件

{
	"name": "test-btn-ui",
	"version": "0.0.1",
	"scripts": {
		"dev": "vite",
		"build": "vite build",
		"serve": "vite preview"
	},
	"files": ["dist"],
	"main": "./dist/test-btn.umd.js",
	"module": "./dist/test-btn.es.js",
	"exports": {
		".": {
			"import": "./dist/test-btn.es.js",
			"require": "./dist/test-btn.umd.js"
		}
	},
	"dependencies": {
		"vue": "^3.2.8"
	},
	"devDependencies": {
		"@vitejs/plugin-vue": "^1.6.0",
		"@vue/compiler-sfc": "^3.2.6",
		"vite": "^2.5.2"
	}
}

打包

生成dist文件

npm run build

注冊(cè)->登錄npm

按提示注冊(cè)就可以 npm官網(wǎng)

發(fā)布前準(zhǔn)備

在dist文件生成package.json文件，自定義組件名(唯一，重名報(bào)錯(cuò)重新起一個(gè)就行),版本號(hào)每次上傳要高于前一次版本號(hào)

//dist文件下
npm init -y

//package.json
{
  "name": "test-btn-ui",
  "version": "1.0.4",
  "description": "",
  "main": "test-btn.es.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

發(fā)布到npm

npm publish

其他項(xiàng)目引用

npm i test-btn-ui

//main.js
import { createApp } from 'vue'
import App from './App.vue'
import TestBtnUI from 'test-btn-ui'
import 'test-btn-ui/style.css'

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

//頁(yè)面.vue
<template>
	<test-btn></test-btn>
</template>

<script setup>

</script>

<style scoped>

</style>