一、目標
1、把以前vue.js項目中用到的功能抽象成獨立的vue組件;
2、在github上開源出來,並搞清楚npm發佈組件的流程,發佈第一款js組件;
注意:如果你還不清楚vue和npm,需要先看下Vue.js實戰——框架搭建_2。
二、步驟
1、搞清楚github.com開源和npmjs開源的差異。經過一番探索,發現二者的異同點如下:
1)https://www.github.com是保存源碼的開源平臺,主要功能是提供源碼,方便大家學習提高,並一起對項目進行優化改良(包括拉分支);
2)https://www.npmjs.com是保存開源的組件平臺,主要功能是提供組件,比如在shell命令中執行npm install xxx安裝組件到本地項目中,在npmjs平臺中通常會保留該組件的github地址,方便大家對該組件進行學習、優化和改進;
3)github和npmjs這2個平臺相互獨立,二者均需上傳項目代碼,只不過npmjs上可以是編譯之後的組件代碼;
4)github和npmjs項目的根路徑下都有package.json文件,二者的意義不同,內容也完全不一樣,所以需要各自建項目並獨立發佈。
2、選定之前項目中的ToggleSwitch開關組件作爲開發目標。
我需要從原先的項目中先抽取出相關功能,並進行改進,保證組件有較好的可擴展性。
ToggleSwitch組件開發過程如下:
1)參考了多個開源組件,確定項目目錄結構如下:
從上往下,框中的3部分分別代表樣例區、組件源碼區和webpack配置區;
2)在demo.vue中引用組件時,還是按照vue本地文件路徑的方式引用vue文件:引用方式相同的示例如下(參見geolocation_1/src/App.vue源碼):
<script>
import HelloWorld from './components/HelloWorld'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
3)ToggleSwitch功能驗證OK後,先提交至github源碼託管平臺(vue-toggle-switch源碼),此時組件並沒法被別人的項目引用到;
4)開始在npmjs平臺上發佈我們的vue-toggle-switch插件。前面說過,npmjs由於package.json文件和github上不同,所以需要重新建1個npm工程路徑:
a、新建npmjs-vue-toggle-switch工程目錄,進入並執行npm init;
b、逐步完善package.json信息如下:
{
"name": "vue-multi-toggle-switch",
"version": "1.0.9",
"description": "toggle-switch component of Vue.js",
"main": "src/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"vue": "^2.5.11"
},
"deprecated": false,
"devDependencies": {
},
"repository": {
"type": "git",
"url": "git+https://github.com/woollay/vue-toggle-switch.git"
},
"keywords": [
"vue.js",
"switch",
"toggle",
"toggle-switch"
],
"author": "woollay",
"license": "MIT",
"bugs": {
"url": "https://github.com/woollay/vue-toggle-switch/issues"
},
"homepage": "https://github.com/woollay/vue-toggle-switch#readme"
}
c、編寫npm組件的入口index.js:
import Vue from 'vue'
import ToggleSwitch from './components/ToggleSwitch.vue'
const plugin = {
install(Vue, options) {
Vue.component('ToggleSwitch', ToggleSwitch)
}
}
export default plugin
d、把github上發佈的代碼(除了package.json)全部搬至此工程,目錄結構如下:
e、在npmjs官網上註冊賬號。註冊成功後,一定記得先從郵箱激活該賬號;
f、執行登錄命令:npm login,並輸入用戶信息進行認證;
g、登錄成功後,執行命令:npm publish,把項目發佈到npmjs平臺;
注意:如果提示如下報錯:
npm ERR publish 403
You do not have permission to publish '...
說明該項目名已經被別人給佔用,只能另取它名。比如我在github上的工程名爲vue-toggle-switch,但在npmjs上發現提交不了,但是搜又搜不到這個組件,懷疑是被人使用,並設爲私有所致。後來我在package.json中把組件名改爲:vue-multi-toggle-switch後,就成功了。
h、版本發佈到npmjs後,如果後續需要更新,就需要先執行命令:npm version patch使版本號+1,然後再執行npm publish重新發布;
5)在npmjs平臺發佈成功後,就需要在github的vue-toggle-switch根路徑下執行:npm i vue-multi-toggle-switch把最新的版本安裝到本地,同時修改爲引用第三方組件的方式來引用。
demo.vue引用第三方組件的代碼如下:
import ToggleSwitch from "vue-multi-toggle-switch";
import Vue from "vue";
Vue.use(ToggleSwitch);
6)在github平臺上驗證通過後,把npmjs工程的最新源碼和配置代碼(除了package.json)全部覆蓋至github上,包括README.md(此文件的編寫請自行搜索MarkDown的使用,此處略),組件纔算是完成了。
組件效果如下:
7)如果你對上述的過程描述還不明白,請參考github上的vue-toggle-switch和npmjs上的vue-multi-toggle-switch,對照着再看下上述過程,如還有疑問,歡迎留言或者郵件交流。
三、總結
1、在開發組件前,我自以爲對經常使用的github和npmjs平臺比較瞭解,心想開發個組件應該沒有多難,實際卻耗費了將近2天的時間,後續還需要多深入使用,多總結;
2、開發併發佈一個組件的過程還是比較繁瑣的,尤其是保證github和npmjs平臺上二者源碼一致。這裏再簡單概述下流程:
1)在github上開發組件功能,驗證通過後提交至github平臺;
2)重新建npmjs上組件,並複製上一步中的組件功能的代碼(除了package.json);
3)npmjs發佈成功後,修改github上源碼demo引用組件的方式:本地引用改成安裝第三方組件後,再使用;
4)上一步驗證通過後,再把github上修改過的demo代碼覆蓋至npmjs項目中,並更新npmjs項目版本後發佈;
5)更新github上引用npmjs上組件的版本,再次提交至github平臺,此時二者源碼才幾乎一致。
3、限於篇幅,本次只是介紹了怎麼開源一個ToggleSwitch組件,組件的源碼解析留待下回分享。
四、參考資料
[1] https://blog.csdn.net/zdhsoft/article/details/79691416
[2] https://github.com/wangdahoo/vue-scroller
[3] https://github.com/wangdahoo/vonic
[4]https://www.npmjs.com/package/vuejs-toggle-switch