前言

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

我个人认为想开源一个npm包（插件）所需要准备的大致内容：

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

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

前期准备工作

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

开始

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

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

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

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

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

在定义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中保留如下两个文件（或者自行发挥）：

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 '你的插件的主入口'"
  },
复制代码

执行命令后，打包后如下：

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

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

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

你的插件cdn默认路径：

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

注意：

如果你在.npmrc（npm配置文件一般在C盘/USER/用户）中将默认源地址配成了淘宝镜像源记得要改回来哦（npm原地址：registry.npmjs.org）
发布npm包时要注意npm包的命名不能有大写字母，每次迭代时版本号不能一样。
发布时需在package.json里添加"private": false才能发布。
在package.json加入"keyword": "你的插件名"以供别人正确引入你的npm包。
在.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

利用GitHub或gitee（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，若有其他错误不能使用该命令，建议直接手动拖拽。?