开源做者心路历程从0到100

前言

GitHub地址：github.com/Dark2017

最开始开源的是vue-dark-photo，他是基于vue2.0封装的一个图片预览组件。在开源以前，曾经给朋友和同事体验了一下内测版本，结果固然是各类建议（吐槽）😱。好比补充动态图大体让用户知道有什么样的功能、某些功能能够去除或优化等等。

最开始vue-dark-photo初版实际上是基于element ui的去作开发的（其实彻底不必，就是图某些东西方便🐶），但在npm安装该插件时候还须要下载element就很蠢并且体积还不小，到后面移除掉了element，依赖只有vue，还有一个很好用的很小的下载库file-saver。大体总体依赖就这些，到后面vue版暂时趋于稳定（欢迎来提issues🐶）就延伸出了react版。

vue-dark-photo

业务代码就不说了，感兴趣的掘友能够自行查看，讲一下总体外层的结构（其实东西也很少🐶）。

总体项目结构以下（vue + webpack），examples存放本地本身调试的例子，packages存放组件的核心代码，dist为打包后的静态文件用于部署到服务器（GitHub page）上做为demo展现。public存放一些静态资源。.gitignore和.npmignore用于git提交或npm发布时忽略某些文件。build文件夹和.travise.yml用于大小版本的自动部署迭代版本，这个待会后面说。

因为个人项目结构调整了，因此咱们须要在vue.config.js去指定一下入口函数及模板：

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

而后利用脚手架打包成库模式便可

"scripts": {
		"lib": "vue-cli-service build --target lib --name vue-dark-photo --dest lib packages/index.js"
	},
复制代码

打包后文件以下

在发布npm时，将lib文件夹上传，这样能够经过npm的cdn引入css和js文件来使用组件。好比：

https://cdn.jsdelivr.net/npm/vue-dark-photo@{verison}/lib/vue-dark-photo.umd.min.js
https://cdn.jsdelivr.net/npm/vue-dark-photo@{verison}/lib/vue-dark-photo.css
复制代码

react-dark-photo

总体项目结构以下（react + vite），与vue版本的基本一致，这里我选择了vite做为打包工具体验很是棒，冷启动和热更新都很是快，做为中小项目的选择仍是至关不错的。核心库基本就react、react-dom、file-saver。感受大伙用vue的仍是居多。

仍是来到配置文件vite.config.js中配置一下库模式的入口以及输出，同时将react的核心库分离出来。

const path = require('path')
module.exports = {
  build: {
    outDir: 'lib',
    lib: {
      entry: path.resolve(__dirname, 'packages/index.js'),
      name: 'react-dark-photo'
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'react',
          ReactDOM: 'react-dom'
        }
      }
    }
  }
}
复制代码

打包后的文件以下

固然也能够经过cdn引入，来使用

https://cdn.jsdelivr.net/npm/react-dark-photo/lib/react-dark-photo.es.js
https://cdn.jsdelivr.net/npm/react-dark-photo/lib/style.css
复制代码

Demo制做及部署

想要制做gif动图就得先录制视频，随便找了一款录制软件（我忘记我用的啥了），录制一段使用组件的过程（把大体功能展现清楚便可），以后再使用转gif的工具转换便可。

推荐网址：app.xunjiepdf.com/

在这里设置一下保持原始尺寸，而后开始转换。

转换完以后效果还行。

以后把转换完的动图放到说明文档上，完善一下文档说明，同时把最新npm版本附上。

这是一个实时npm图，当你发布最新版本时，图会自动更新，具体用法看官方

nodei.co/

补充完文档以后，开始制做在线Demo，利用GitHub page的白嫖服务，新建一个以.github.io结尾的仓库

新建一条分支gh-pages（不用也能够），而后配置一下page生效的分支便可。

至此文档和在线Demo均已补充好了，接下来开始整活（自动部署）。

自动部署

其实我之前有一篇文章就讲到过了，利用tarvise ci来自动部署能够实现小版本迭代，在这里：传送门

若是要大版本，如1.0.0 -> 2.0.0 相似这种或者其余类型的版本号，就须要手动输入版本号。

看一下须要的依赖：

"devDependencies": {
        "chalk": "^4.1.1",
        "fs": "0.0.1-security",
        "inquirer": "^8.1.1",
        "log-symbols": "^4.1.0",
        "ora": "^5.4.1",
        "path": "^0.12.7",
        "shelljs": "^0.8.4"
}
复制代码

简单粗暴实现一个node脚本：

const path = require("path");
const fs = require("fs");
const ora = require("ora");
const shell = require("shelljs");
const package = path.resolve(__dirname, "../package.json");
const symbols = require("log-symbols");
const chalk = require("chalk");
const inquirer = require("inquirer");

const spinner = ora("").start();
spinner.start();
// 执行打包脚本
const build_lib = async (srcipt) => {
	startLog(">>>> 开始执行 <<<<");
	const res = shell.exec(`${srcipt}`);
	if (res.code === 0) {
		successLog("项目打包成功!");
	} else {
		errorLog("项目打包失败, 请重试!");
		process.exit(); //退出流程
	}
};

// 检查package版本
const check_version = async () => {
	if (!fs.existsSync(package)) {
		errorLog("文件不存在！");
		return;
	}
	const data = fs.readFileSync(package);
	if (data) {
		const json = JSON.parse(data);
		infoLog(`当前package版本为：${json.version}`);
	} else {
		errorLog("读取失败！");
	}
};

// 输入版本号
function set_version() {
	const list = [
		{
			name: "verison",
			message: "请输入迭代版本号：",
		},
	];
	return inquirer.prompt(list);
}

// 修改版本号
function edit_verison(v) {
	fs.readFile(package, "utf8", (err, data) => {
		if (err) {
			errorLog("读取失败！");
		} else {
			const json = JSON.parse(data.toString());
			json.version = v;
			fs.writeFile(package, JSON.stringify(json, null, "\t"), (e) => {
				if (e) {
					errorLog("写入失败！缘由：/n", e);
				}
			});
		}
	});
}

// 发布npm
// npm 登陆一次后会把token留在配置文件
function publish_npm() {
	shell.exec("npm publish");
}
// 开始部署日志
function startLog(...content) {
	console.log(chalk.magenta(...content));
}

// 信息日志
function infoLog(...content) {
	console.log(symbols.info, chalk.blue(...content));
}

// 成功日志
function successLog(...content) {
	console.log(symbols.success, chalk.green(...content));
}

// 错误日志
function errorLog(...content) {
	console.log(chalk.red(...content));
}

// 下划线重点输出
function underlineLog(content) {
	return chalk.blue.underline.bold(`${content}`);
}

spinner.stop();
(async () => {
	await check_version();
	let { verison } = await set_version();
	await edit_verison(verison);
	await build_lib("npm run build");
	await publish_npm();
})();
复制代码

利用fs和path来获取路径以及读取文件，ora、symbols、chalk来美化终端输出，inquirer来实现交互，shelljs用来执行脚本。

最后

欢迎指出个人不足，喜欢的朋友记得点赞关注收藏三连击。