🚀手把手教你从零开始开源插件🚀

715 阅读4分钟

前言

基于之前我开源的项目的一些总结,以及收集到的一些问题及需求等,如果你想开源一个自己的插件(npm)但不知道如何下手,本文会手把手教你去架设,并且会说明一些我遇到的问题,主要针对vue2.x。

我个人认为想开源一个npm包(插件)所需要准备的大致内容:

  1. 核心代码开源(GitHub)、说明文档
  2. npm包发布、cdn架设
  3. 在线demo架设(可以配合自己制作的gif效果图放在说明文档)

tips:npm版本推荐使用nvm控制

前期准备工作

  1. 需要一个GitHub账号(可以把demo架在GitHub或gitee等或者你自己的服务器)
  2. 需要一个npm账号(发布你的插件到npm上)
  3. 若是基于vue的插件建议安装vue脚手架

开始

使用vue-cli生成你自己的项目,将demo文件都删除掉调整一下目录如下:

image.png

  • examples:你自己在本地测试的demo,将入口函数和根组件都放进去。
  • lib:是打包后的lib文件,这个后面提到,前面先不用管。
  • packages:这里装你的核心代码,第一层最好有个入口函数暴露组件。
  • public:这里放一些静态资源(图片等)。

注意这里我们更改了结构目录,需要用webpack修改一下入口位置。

module.exports = {
  pages: {
    index: {
      entry: 'examples/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    }
  }
}

这里整体框架已搭建完成,接下来说一些细节部分。

image.png

在定义vue的插件的时候,需要有install方法在里面做你想做的事情,然后在index.js中暴露出去,比如:

import component from './vue-dark-photo'

// vue的install方法,用于定义vue插件
const install = (Vue, option) => {
    // do something
}
// 用于cdn引入挂载vue实例 引入插件
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export default {
  install,
  component
}

完成你自己的组件后,在examples中保留如下两个文件(或者自行发挥):

image.png

main.js

import Vue from 'vue'
import App from './App.vue'
import VDPhoto from '../packages'

Vue.use(VDPhoto)

new Vue({
  render: h => h(App),
}).$mount('#app')

在入口函数引入后,在App.vue里用就可以了,这里不再叙述,他存在的目的主要是方便自己本地测试插件。

发布npm

在发布之前建议将README.md完善一下,补充必要说明等。

开发完成后,若你希望插件能通过cdn引入则需要利用vue把代码打包成库模式(lib),在package.json加入以下命令:

  "scripts": {
    "lib": "vue-cli-service build --target lib --name '你的插件名' --dest lib '你的插件的主入口'"
  },

执行命令后,打包后如下:

image.png

详细可以查看官方文档: lib打包

完成打包之后,接下来可以发布npm包了,首先执行npm login,登录你的npm账号

正确登录后,就可以执行npm publish去发布你的npm包

你的插件cdn默认路径:

cdn.jsdelivr.net/npm/你的插件名@{… cdn.jsdelivr.net/npm/你的插件名@{…

注意:

  1. 如果你在.npmrc(npm配置文件一般在C盘/USER/用户)中将默认源地址配成了淘宝镜像源记得要改回来哦(npm原地址:registry.npmjs.org)
  2. 发布npm包时要注意npm包的命名不能有大写字母,每次迭代时版本号不能一样。
  3. 发布时需在package.json里添加"private": false才能发布。
  4. package.json加入"keyword": "你的插件名"以供别人正确引入你的npm包。
  5. .npmignore配置你不想发布的文件,给出一份默认目录:
.DS_Store
node_modules
examples
public
/dist
.svn
.gitignore

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

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

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

架设在线demo

利用GitHubgitee(gitee pages 的功能暂时已经不能用了)来架设我们自己的在线demo,首先创建一个仓库命名为'你的名称'.github.io,此时会有默认分支main,你可以使用这个分支,我习惯新建一条分支gh-pages,在main中用vue脚手架搭建一个雏形并安装你的插件,比如我的是npm i vue-dark-photo,然后在项目把一些基本功能都使用上。之后将项目打包后默认生成的dist下的文件提交到gh-pages分支,使用该条命令即可git subtree push --prefix=dist origin gh-pages,若有其他错误不能使用该命令,建议直接手动拖拽。🐶

然后在GitHub中配置如下操作

image.png

直接访问图中网站即可。每次推送你的静态资源到远程仓库时,GitHub会自动部署你的代码(需要一点点时间),并且可以查看你的历史版本如下

image.png

image.png

至此在线demo已架设完毕(如果你没有代理建议整一个,做开发的怎么能没有代理🐶)

结尾

如果该文章对你有帮助,请给我点赞收藏或者有问题和建议请在下方留言给出你的宝贵意见。

过了这个村没这个店🐶,建议收藏点赞,相信上进且阳光帅气/漂亮的你一定会点赞。

🚀我是饼干,你成长道路上的一盏明灯。🚀