開源做者心路歷程從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用來執行腳本。

最後

歡迎指出個人不足，喜歡的朋友記得點贊關注收藏三連擊。