引言

????????在開源的世界里，每個人都有機會成為貢獻者，甚至是創新的引領者。您是否有過這樣的想法：開發一個解決特定問題的小工具，讓她成為其他開發者手中的利器？今天，我們就來一場實戰訓練，學習如何將你的代碼打包成npm插件包，發布到全球最大的JS包管理平臺–npm上。讓全世界的其他開發者受益于你的智慧吧。
???????? 我將自己編寫的常用組件，工具模塊，指令，常用的api庫，框架等代碼為了更好的復用，靈活的管理，上傳到了npm庫中進行了管理，更新，迭代。

準備工作

1. 準備好node.js環境>>>>
2. 創建一個干凈的項目環境>>>>防止打包組件過程中受到其package.json的干擾 vue create 項目名稱

步驟一、目錄文件創建、組件寫入、本地運行自測

一、 根據個人習慣，創建一個package文件，用于存放你的組件及其API方法。
目錄介紹

二、封裝一個簡單組件demo,下面為基于elementUI封裝的一個開關組件。

<template><div class="custom-switch" @click="switchClick"><div :class="isCenter?'switch-box':''" v-loading="loading">開關 <el-switch class="switch-item" v-bind="$attrs"></el-switch></div></div>
</template><script>
export default {name: "hsk-switch",props: {loading: {default: false,type: Boolean,},isCenter: {default: false,type: Boolean,},},data() {return {};},created() {},mounted() {},methods: {switchClick() {// 如果禁用和loading狀態，不emit給父組件if (this.$attrs.disabled || this.loading) {return;}this.$emit("switchClick", this.$attrs.value);},},
};
</script>
<style scoped>
.custom-switch{width: 40px;
}
.switch-box {display: flex;display: -webkit-flex;justify-content: center;align-items: center;
}
</style>
<!-- <template><div @click="switchClick"><el-switchv-model="localValue":active-value="activeValue":inactive-value="inactiveValue":active-color="activeColor":inactive-color="inactiveColor":disabled="disabled"@change="handleChange"></el-switch></div>
</template><script>
export default {name: "hsk-switch",props: {value: {type: [String, Number, Boolean],default: false,},activeValue: {type: [String, Number, Boolean],default: true,},inactiveValue: {type: [String, Number, Boolean],default: false,},activeColor: {type: String,default: "#13ce66",},inactiveColor: {type: String,default: "#ff4949",},disabled: {type: Boolean,default: false,},},data() {return {localValue: this.value,};},watch: {value: {handler(newVal) {this.localValue = newVal;},immediate: true,},},methods: {switchClick(){this.$emit('switchlick', this.$attrs.value)},handleChange(newStatus) {// 當開關發生變化時，更新本地狀態this.localValue = newStatus;this.$emit("change", this.localValue);},},
};
</script><style scoped>
/* 可以添加樣式進行定制 */
</style> -->

三、封裝好組件后，進行本地項目調用查看是否可以使用。

<template><div><HSKSwitch v-model="flg" :isCenter="false" @switchClick="handleStatusChange" :active-value="1":inactive-value="0"></HSKSwitch></div>
</template><script>
import HSKSwitch from "../package/hsk-switch/index.vue"
export default {name:"hskSwitch",components:{HSKSwitch},data(){return {flg:1,}},methods:{//開關handleStatusChange(){console.log("被執行了")// this.switchLoading = true// 這里就可以調用接口，接口成功后修改值和loading狀態setTimeout(() => {this.flg = !this.flg ? 1 : 0// this.switchLoading = false}, 100)}}
}
</script><style></style>

本地項目調用預覽效果：

步驟二、組件封裝好自測通過進行組件的批量導出

四、在package目錄下創建一個index.js文件，用于注冊或批量注冊已封裝好的組件和方法。

代碼

//package/index.js
import HskTable from "./hsk-table/index.vue"; // table組件
import HSKPagination from "./hsk-pagination/index.vue"; // table下的分頁組件
import HSKSwitch from "./hsk-switch/index.vue"  //開關組件
import HSKDialog from "./hsk-dialog/index.vue"
import HSKSelect from './hsk-select/index.vue'
import HSKTreeSel from './hsk-treeSelect/index.vue'
import HSKTime from './hsk-time/index.vue'
import HSKAddressSel from './hsk-addressSel/index.vue'
// import * as hskMsgbox from "./pop-up.js"
const coms = [HskTable,HSKPagination,HSKSwitch,HSKDialog,HSKSelect,HSKTreeSel,HSKTime,HSKAddressSel]; // 將來如果有其它組件,都可以寫到這個數組里// 批量組件注冊
const install = function (Vue) {coms.forEach((com) => {Vue.component(com.name, com);});
};
// 判斷是否是直接引入文件
if (typeof window !== "undefined" && window.Vue) {install(window.Vue);
}
export default {// 導出的對象必須具有 install，才能被 Vue.use() 方法安裝install,// 以下是具體的組件列表HskTable,HSKPagination,HSKSwitch,HSKDialog,// hskMsgbox,HSKSelect,HSKTreeSel,HSKTime,HSKAddressSel
};

步驟三、改造組件所在項目中的package.json文件，并執行打包

一、創建hskui打包存放文件夾，用于存放打包組件庫存放的位置

二、package.json配置打包命令

"hsk-ui": "vue-cli-service build --target lib ./src/package/index.js --name hskui --dest hskui"

參數說明：

– target lib : 關鍵字 指定打包的目錄
– name : 打包后的文件名字
– dest : 打包后的文件夾的名稱

三、執行打包命令

  npm run hsk-ui

打包成功：

步驟四、新建需要上傳文件夾并初始化package.json文件

一、新建一個自己需要上傳組件包的文件夾(hskcomTest)，可在打包后存放一些其他打包不進去的文件。將執行打包命令生成的文件夾內容復制到hskcomTest文件夾中。進入hskcomTest 目錄執行npm init -y,初始化一個package.json文件。

	npm init -y

初始化過后的文件：

參數說明

description : 組件包描述信息。
keywords : 字符串數組，便于用戶在npm上搜索到我們的項目。
version : 項目版本號。
name : package.json文件中最重要的就是name和version字段，這兩項是必填的。名稱和版本一起構成一個標識符，該標識符被認為是完全唯一的。對包的更改應該與對版本的更改一起進行。name必須是字符串，不能以.或_開頭，不能有大寫字母，因為名稱最終成為URL的一部分因此不能包含任何非URL安全字符。 npm官方建議我們不要使用與核心節點模塊相同的名稱。不要在名稱中加js或node。如果需要可以使用engines來指定運行環境。
main : 項目文件入口文件，自動生成，不需要改動。

二、修改打打包上傳地址dev，test，pre，prod環境上傳地址，及其打包命令。
三、配置好上傳包的package.json后，進行將原打包的文件及打包不進來的文件復制放入到hskcomTest文件夾中

步驟五、添加登錄后端人員給的npm私服賬號和鏡像地址

一、

npm login

步驟六、發布

在組件打包后的文件夾中執行，進行上傳組件或者你的插件包

npm publish --registry ”Nexus的鏡像地址“

但是我當前已經在需上傳的組件包中使用了如下配置

所以我只需要執行npm run hsk-ui:dev命令即可

npm run hsk-ui:dev`

打包上傳成功提示如下

npm 私服上即可看到

步驟七、安裝并使用已發布包

一、安裝
因為我是用的是私服的npm組件庫，所以需要輸入用戶名和密碼并指定url的地址,如果是公共服，那則不需要私服地址。

npm install -u 用戶名 -p 密碼 --registry=http://xxx.xxx.xx.xx:xxx/repository/npm-group-dev/ hsk-ui@1.0.1-SNAPSHOT

二、安裝完成后，main.js中全局引入。

//引入hsk組件
import hskui from "hsk-ui"
import "hsk-ui/styles/hskui.css"
//引入hsk方法
import { hskMsgbox } from 'hsk-ui/commonUtils'

三、頁面中使用自己剛剛定義的組件

<hsk-switch></hsk-switch>

效果：

結語

????????希望這篇指南能激發你發布自己npm插件包的熱情，讓編程之旅更加精彩！如果你有任何疑問或需要進一步的幫助，請隨時留言，我們共同探討。加油，未來的npm之星！🌟