阅读 1976

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

前言

image.png

GitHub地址:github.com/Dark2017

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

233947-162083398796f2.jpg

最开始vue-dark-photo第一版其实是基于element ui的去做开发的(其实完全没必要,就是图某些东西方便🐶),但在npm安装该插件时候还需要下载element就很蠢而且体积还不小,到后面移除掉了element,依赖只有vue,还有一个很好用的很小的下载库file-saver。大致整体依赖就这些,到后面vue版暂时趋于稳定(欢迎来提issues🐶)就延伸出了react版。

image.png

vue-dark-photo

业务代码就不说了,感兴趣的掘友可以自行查看,讲一下整体外层的结构(其实东西也不多🐶)。

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

image.png

由于我的项目结构调整了,所以我们需要在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"
	},
复制代码

打包后文件如下

image.png

在发布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作为打包工具体验非常棒,冷启动和热更新都非常快,作为中小项目的选择还是相当不错的。核心库基本就reactreact-domfile-saver。感觉大伙用vue的还是居多。

image.png

还是来到配置文件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'
        }
      }
    }
  }
}
复制代码

打包后的文件如下

image.png

当然也可以通过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/

image.png

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

image.png

转换完之后效果还行。

demo1.gif

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

vue-dark-photo

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

nodei.co/

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

image.png

新建一条分支gh-pages(不用也可以),然后配置一下page生效的分支即可。

image.png

至此文档和在线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();
})();
复制代码

利用fspath来获取路径以及读取文件,orasymbolschalk来美化终端输出,inquirer来实现交互,shelljs用来执行脚本。

最后

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

231130-1625843490cb55.jpg

文章分类
前端
文章标签