前言
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图，当你发布最新版本时，图会自动更新，具体用法看官方
补充完文档之后，开始制作在线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用来执行脚本。
最后
欢迎指出我的不足，喜欢的朋友记得点赞关注收藏三连击。
