自己寫npm插件發(fā)布&&進(jìn)階Github持續(xù)集成工作流自動(dòng)發(fā)布

前言：基于vue來(lái)開發(fā)一個(gè)簡(jiǎn)單的界面ui插件。

手動(dòng)發(fā)布npm包

一、首先上去npm注冊(cè)一個(gè)賬號(hào)（這不用說(shuō)了，略過(guò)）

網(wǎng)址：https://www.npmjs.com/
記住賬號(hào)、密碼、郵箱，后面發(fā)布需要用到。

二、初始化一個(gè)vue項(xiàng)目

vue create package-name
創(chuàng)建一個(gè)packages文件夾（重要），里面放的就是你的插件組件（可以這樣說(shuō)），最終目錄結(jié)構(gòu)我的是這樣，可以參考，根據(jù)自己的實(shí)際情而定。

插件目錄

插件目錄分析

  • docs：文檔說(shuō)明
  • packages：插件組件
  • src：下面有assets(資源文件)、components(頁(yè)面組件)、app.vue(頁(yè)面入口)、main.js(入口文件)、index.js(重點(diǎn)：插件主入口文件)

其實(shí)這個(gè) src 目錄你可以作為一個(gè)測(cè)試的作用，因?yàn)槟阋獙懙氖遣寮?，全部都是?packages 文件里面。

三、添加插件組件

我們?cè)?packages 下面新建一個(gè) kdd-link 文件夾，文件大概就是這樣

插件組件目錄

index.js（重點(diǎn)）

// 導(dǎo)入組件，組件必須申明name
import KddLink from './src/kdd-link';

// 為組件提供install方法，供按需引入
KddLink.install = function (Vue) {
    Vue.component(KddLink.name, KddLink)
}

// 導(dǎo)出組件
export default KddLink

kdd-link.vue

<template>
    <a :href="href" v-bind="$attrs">
        <slot></slot>
    </a>
</template>
<script>
export default {
    name: "KddLink",  // 名字一定要寫
    props:{
        href: {
            type: String,
            default: ''
        }
        name:{
            type: String,
            default: ''
        }
    },
}
</script>

這樣算是寫完一個(gè)組件了。

寫一下index.js文件

import KddLink from '../packages/kdd-link/index.js';
const components = [
    KddLink
]

const install = function (Vue) {
    if (install.installed) {
        return
    }
    install.installed = true;
    components.map(component=>{
        Vue.component(component.name,component)
    })
}

if(typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}
export default {
    install,
    KddLink
}

我們來(lái)測(cè)試一下可不可以使用。

  • 首先在main.js里面引入
main.js引入
  • 在app.vue 里面使用
app.vue使用

  • 效果


    效果

ok，到這里為止就算是寫好這個(gè)插件了

package.json文件

發(fā)包肯定少不了配置package.json，這里我說(shuō)幾個(gè)主要的

image.png

.gitignore文件

提交上github上需要忽略的文件，有些文件就不要提交上去了，比如 node_modules 下面的依賴包

.DS_Store
node_modules
/dist
/lib/

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
.eslintrc.js

.npmignore文件

發(fā)布的時(shí)候需要忽略的文件。

node_modules/
vue.config.js
babel.config.js
*.map
*.html
src/
docs/
.idea
.vscode
.eslintrc.js
.github/
test/  
.github/  
test.js

我這邊發(fā)布的時(shí)候就發(fā)了這幾個(gè)文件，僅供參考，視情況而定，比如你這個(gè)包又需要兼容ts，那可能又有其他的文件。


image.png

這樣我們的插件算是寫完了

四、發(fā)布（在目錄下）

  • 發(fā)布之前需要npm run lib，會(huì)自動(dòng)生成lib文件夾。
  • npm login：登錄需要username、password、email，其中password輸入時(shí)看不見的，只要保證你輸入的時(shí)正確的，回車就可以繼續(xù)了。
  • npm publish：發(fā)布
    這樣，就算是完成這個(gè)插件的發(fā)布了

你以為就會(huì)這樣完了嗎，就這？不！在登錄的過(guò)程中你可能會(huì)遇到各種各樣的問(wèn)題，比如：

lALPDhJzxZw6wJ7M0s0DvA_956_210.png

怎么解決？有問(wèn)題，肯定就有解決方案
解決辦法：

  1. 先清除掉以前的代理設(shè)置
npm config set proxy null
npm config set https-proxy null
  1. 重新設(shè)置
npm config registry http://registry.cnpmjs.org/

這個(gè)問(wèn)題呢，我自己也是網(wǎng)上搜刮來(lái)的答案，參考鏈接npm err安裝報(bào)錯(cuò)解決辦法，其實(shí)也有其他的解決方法，看哪個(gè)有用就完了。
總之，遇到問(wèn)題，百度或者其他問(wèn)同事問(wèn)網(wǎng)友，總能解決的。
最后，我們的插件終于發(fā)布成功了，我們來(lái)看一下，在其他項(xiàng)目安裝這個(gè)插件看看能不能使用。

npm install 包名

引入插件

import ui from '包名'

補(bǔ)充
如果在引入的過(guò)程中出現(xiàn)一個(gè)說(shuō)你沒(méi)有安裝這個(gè)插件的問(wèn)題，但你明明已經(jīng)安裝了，不要著急，應(yīng)該就是你在插件的package.json文件沒(méi)有寫對(duì) main 的路徑。
這個(gè)就是main的作用：插件的主入口

使用

import ui from '包名'
Vue.use(ui);

<kdd-link  target="_blank">這是啥鏈接</kdd-link>
image.png

大功告成?。。?/p>

Github持續(xù)集成自動(dòng)化發(fā)布npm包

實(shí)際應(yīng)用中，我們發(fā)布插件不可能每次都 npm run build 然后 npm login npm publish，這屬實(shí)有點(diǎn)麻煩，能不能簡(jiǎn)單一點(diǎn)，我提交個(gè)代碼或者合并代碼的時(shí)候就發(fā)布呢？那就是持續(xù)集成，自動(dòng)化發(fā)布了。

什么是持續(xù)集成
持續(xù)集成指的是，頻繁地（一天多次）將代碼集成到主干。
它的好處主要有兩個(gè)。

  1. 快速發(fā)現(xiàn)錯(cuò)誤。每完成一點(diǎn)更新，就集成到主干，可以快速發(fā)現(xiàn)錯(cuò)誤，定位錯(cuò)誤也比較容易。
  2. 防止分支大幅偏離主干。如果不是經(jīng)常集成，主干又在不斷更新，會(huì)導(dǎo)致以后集成的難度變大，甚至難以集成。

持續(xù)集成的目的，就是讓產(chǎn)品可以快速迭代，同時(shí)還能保持高質(zhì)量。它的核心措施是，代碼集成到主干之前，必須通過(guò)自動(dòng)化測(cè)試。只要有一個(gè)測(cè)試用例失敗，就不能集成。

一、首先就是你的代碼要放在GitHub上（這不是廢話？）

image.png

二、找到Actions創(chuàng)建workflow模板

我這是基于vue的插件，所以選擇Node.js Package 點(diǎn)擊Set up this workflow

創(chuàng)建workflow模板

三、點(diǎn)擊 Commit new file 提交文件

image.png

項(xiàng)目中即可生成下列文件
.github
?|- workflows
???|- npmpublish.yml

npm-publish.yml

# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages

name: Node.js Package

on:
  release:
    types: [created]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: 14
      - run: npm ci
      - run: npm test

  publish-npm:
    needs: build
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: 14
          registry-url: https://registry.npmjs.org/
      - run: npm ci
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

  publish-gpr:
    needs: build
    runs-on: ubuntu-latest
    permissions:
      contents: read
      packages: write
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: 14
          registry-url: https://npm.pkg.github.com/
      - run: npm ci
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

四、代碼拉取下來(lái)修改一下

# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages

name: Node.js Package

on:
  pull_request:
    branches:
      - master
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: 14
      - run: npm ci
      - run: npm test

  publish-npm:
    needs: patch
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: 14
          registry-url: https://registry.npmjs.org/
      - run: npm ci
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

其實(shí)就是刪了publish-gpr，gpr（Github Package Registry）修改on觸發(fā)條件。
下面來(lái)解釋一下各個(gè)部分的含義

  • name 此工作流的名稱。
  • on 觸發(fā)條件，上述文本表示當(dāng)master分支合并和推送時(shí)會(huì)觸發(fā)workflow。
  • jobs 工作集合，例如jobs內(nèi)部的build、publish-npm表示具體的工作任務(wù)的ID，可以自定義。
  • needs 表示當(dāng)前的job依賴與另外一個(gè)job，例如上面的publish-npm依賴于build。
  • runs-on 表示工作所在的虛擬機(jī)操作系統(tǒng)，目前可選的系統(tǒng)有ubuntu-latest、ubuntu-18.04、ubuntu-16.04、windows-latest、windows-2019、windows-2016、macOS-latest、macOS-10.14。
  • steps 表示job所執(zhí)行的 actions 和 commands 集合。

五、添加npm access Tokens

  • 去到官網(wǎng)，的點(diǎn)擊自己的賬號(hào)頭像，找到 access Tokens
image.png
  • 新增一個(gè)token，Generate New Token
image.png
  • 選擇token類型，我選的是Automation，翻譯過(guò)來(lái)就是，就是發(fā)布插件，自動(dòng)令牌將繞過(guò)雙因素身份驗(yàn)證。如果啟用了雙因素身份驗(yàn)證，則在使用自動(dòng)化令牌時(shí)不會(huì)提示您，使其適合CI/CD工作流。點(diǎn)擊Generate Token。
image.png
  • 就創(chuàng)建成功了，一定要復(fù)制保存下來(lái)，不然關(guān)閉窗口就沒(méi)了
image.png

六、github創(chuàng)建一個(gè)secrets

setting頁(yè)面


image.png

Name 就填寫npm_token，因?yàn)槟愕膎pm-publish.yml文件寫的就是${{secrets.npm_token}}，把剛剛復(fù)制的token粘貼過(guò)來(lái)。

image.png

七、本地代碼推送，在Actions頁(yè)面就可以看到持續(xù)集成的結(jié)果了。

image.png
image.png

如果后面再更新發(fā)布版本，只要更換npm_token的值就行啦。


image.png
image.png

可能在過(guò)程中會(huì)遇到一個(gè)問(wèn)題，就是你的包在npm上已經(jīng)有了這個(gè)版本

image.png

package.json修改版本重新推送一下就可以。

image.png

到這里就算是全部工作完成了，以后繼續(xù)努力。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容