前言
基于之前我开源的我的项目的一些总结，以及收集到的一些问题及需要等，如果你想开源一个本人的插件（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默认门路：
https://cdn.jsdelivr.net/npm/…
https://cdn.jsdelivr.net/npm/…
留神：
- 如果你在
.npmrc（npm配置文件个别在C盘/USER/用户）中将默认源地址配成了淘宝镜像源记得要改回来哦（npm原地址：https://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，若有其余谬误不能应用该命令，倡议间接手动拖拽。🐶
而后在GitHub中配置如下操作
间接拜访图中网站即可。每次推送你的动态资源到近程仓库时，GitHub会主动部署你的代码（须要一点点工夫），并且能够查看你的历史版本如下
至此在线demo已架设结束（如果你没有代理倡议整一个，做开发的怎么能没有代理🐶）
结尾
如果该文章对你有帮忙，请给我点赞珍藏或者有问题和倡议请在下方留言给出你的宝贵意见。
过了这个村没这个店🐶，倡议珍藏点赞，置信上进且阳光帅气/丑陋的你肯定会点赞。
🚀我是饼干，你成长路线上的一盏明灯。🚀
发表回复