前言：基于vue来开发一个简单的界面ui插件。
手动发布npm包
一、首先上去npm注册一个账号（这不用说了，略过）
网址：https://www.npmjs.com/
记住账号、密码、邮箱，后面发布需要用到。
二、初始化一个vue项目
vue create package-name
创建一个packages文件夹（重要），里面放的就是你的插件组件（可以这样说），最终目录结构我的是这样，可以参考，根据自己的实际情而定。
插件目录分析
-
docs：文档说明 -
packages：插件组件 -
src：下面有assets(资源文件)、components(页面组件)、app.vue(页面入口)、main.js(入口文件)、index.js(重点：插件主入口文件)
其实这个 src 目录你可以作为一个测试的作用，因为你要写的是插件，全部都是在 packages 文件里面。
三、添加插件组件
我们在 packages 下面新建一个 kdd-link 文件夹，文件大概就是这样
index.js（重点）
// 导入组件，组件必须申明name
import KddLink from './src/kdd-link';
// 为组件提供install方法，供按需引入
KddLink.install = function (Vue) {
Vue.component(KddLink.name, KddLink)
}
// 导出组件
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>
这样算是写完一个组件了。
写一下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
}
我们来测试一下可不可以使用。
- 首先在main.js里面引入
- 在app.vue 里面使用
-
效果
效果
ok，到这里为止就算是写好这个插件了
package.json文件
发包肯定少不了配置package.json，这里我说几个主要的
.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文件
发布的时候需要忽略的文件。
node_modules/
vue.config.js
babel.config.js
*.map
*.html
src/
docs/
.idea
.vscode
.eslintrc.js
.github/
test/
.github/
test.js
我这边发布的时候就发了这几个文件，仅供参考，视情况而定，比如你这个包又需要兼容ts，那可能又有其他的文件。
这样我们的插件算是写完了
四、发布（在目录下）
- 发布之前需要npm run lib，会自动生成lib文件夹。
- npm login：登录需要username、password、email，其中password输入时看不见的，只要保证你输入的时正确的，回车就可以继续了。
- npm publish：发布
这样，就算是完成这个插件的发布了
你以为就会这样完了吗，就这？不！在登录的过程中你可能会遇到各种各样的问题，比如：
怎么解决？有问题，肯定就有解决方案
解决办法：
- 先清除掉以前的代理设置
npm config set proxy null
npm config set https-proxy null
- 重新设置
npm config registry http://registry.cnpmjs.org/
这个问题呢，我自己也是网上搜刮来的答案，参考链接npm err安装报错解决办法，其实也有其他的解决方法，看哪个有用就完了。
总之，遇到问题，百度或者其他问同事问网友，总能解决的。
最后，我们的插件终于发布成功了，我们来看一下，在其他项目安装这个插件看看能不能使用。
npm install 包名
引入插件
import ui from '包名'
补充
如果在引入的过程中出现一个说你没有安装这个插件的问题，但你明明已经安装了，不要着急，应该就是你在插件的package.json文件没有写对 main 的路径。
这个就是main的作用：插件的主入口
使用
import ui from '包名'
Vue.use(ui);
<kdd-link href="https://www.baidu.com" target="_blank">这是啥链接</kdd-link>
大功告成！！！
Github持续集成自动化发布npm包
实际应用中，我们发布插件不可能每次都 npm run build 然后 npm login npm publish，这属实有点麻烦，能不能简单一点，我提交个代码或者合并代码的时候就发布呢？那就是持续集成，自动化发布了。
什么是持续集成
持续集成指的是，频繁地（一天多次）将代码集成到主干。
它的好处主要有两个。
- 快速发现错误。每完成一点更新，就集成到主干，可以快速发现错误，定位错误也比较容易。
- 防止分支大幅偏离主干。如果不是经常集成，主干又在不断更新，会导致以后集成的难度变大，甚至难以集成。
持续集成的目的，就是让产品可以快速迭代，同时还能保持高质量。它的核心措施是，代码集成到主干之前，必须通过自动化测试。只要有一个测试用例失败，就不能集成。
一、首先就是你的代码要放在GitHub上（这不是废话？）
二、找到Actions创建workflow模板
我这是基于vue的插件，所以选择Node.js Package 点击Set up this workflow
三、点击 Commit new file 提交文件
项目中即可生成下列文件
.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}}
四、代码拉取下来修改一下
# 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}}
其实就是删了publish-gpr，gpr（Github Package Registry）修改on触发条件。
下面来解释一下各个部分的含义
-
name此工作流的名称。 -
on触发条件，上述文本表示当master分支合并和推送时会触发workflow。 -
jobs工作集合，例如jobs内部的build、publish-npm表示具体的工作任务的ID，可以自定义。 -
needs表示当前的job依赖与另外一个job，例如上面的publish-npm依赖于build。 -
runs-on表示工作所在的虚拟机操作系统，目前可选的系统有ubuntu-latest、ubuntu-18.04、ubuntu-16.04、windows-latest、windows-2019、windows-2016、macOS-latest、macOS-10.14。 -
steps表示job所执行的actions和commands集合。
五、添加npm access Tokens
- 去到官网，的点击自己的账号头像，找到 access Tokens
- 新增一个token，Generate New Token
- 选择token类型，我选的是Automation，翻译过来就是，就是发布插件，自动令牌将绕过双因素身份验证。如果启用了双因素身份验证，则在使用自动化令牌时不会提示您，使其适合CI/CD工作流。点击Generate Token。
- 就创建成功了，一定要复制保存下来，不然关闭窗口就没了
六、github创建一个secrets
setting页面
Name 就填写npm_token，因为你的npm-publish.yml文件写的就是${{secrets.npm_token}}，把刚刚复制的token粘贴过来。
七、本地代码推送，在Actions页面就可以看到持续集成的结果了。
如果后面再更新发布版本，只要更换npm_token的值就行啦。
可能在过程中会遇到一个问题，就是你的包在npm上已经有了这个版本
package.json修改版本重新推送一下就可以。
到这里就算是全部工作完成了，以后继续努力。
