preface

GitHub: github.com/Dark2017

Vue-dark-photo is an image preview component based on the vUE 2.0 package. Before open source, I gave friends and colleagues a taste of the private beta version, and of course I got all kinds of advice (teasing) 😱. For example, additional giFs let users know roughly what features are available, what features can be removed or optimized, and so on.

The first version of Vue-dark-Photo was originally developed based on the Element UI (which was completely unnecessary, just for the convenience of 🐶), but it was silly and bulky to have to download the Element when installing the plugin in NPM, so it was removed later. Dependencies are only vue, and there’s a very small download library called File-saver that works well. Roughly the overall dependence on these, to the back of the VUE version of the temporary stability (welcome to refer to issues🐶) is extended to the React version.

vue-dark-photo

Business code is not said, interested in digging friends can be their own view, about the overall structure of the outer layer (in fact, things are not much 🐶).

The overall project structure is as below (vue + webpack), examples for local debugging, Packages for core component code, dist for packaged static files for deployment on the server (GitHub page) as demo. Public holds static resources. .gitignore and.npmignore are used to ignore certain files when git commit or NPM publish. The build folder and.travise.yml are used to automate the deployment iteration of the large and small versions, which we’ll talk about later.

Since my project structure has been adjusted, we need to specify the entry function and template in vue.config.js:

module.exports = {
  pages: {
    index: {
      entry: 'examples/main.js'.template: 'public/index.html'.filename: 'index.html'}}}Copy the code

Then use scaffolding packaging into library mode

	"scripts": {
		"lib": "vue-cli-service build --target lib --name vue-dark-photo --dest lib packages/index.js"
	},
Copy the code

The package file is as follows

When publishing NPM, upload the lib folder so that the component can be used by importing CSS and JS files through NPM’s CDN. Such as:

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
Copy the code

react-dark-photo

The overall project structure is as follows (React + Vite), which is basically the same as the VUE version. Here I chose Vite as the packaging tool, and the experience was very good. Both cold start and hot update were very fast. The core libraries are basically react, react-dom, and file-saver. I think most of us are using Vue.

Again, go to the configuration file vite.config.js to configure the entry and output of the library pattern, and separate the React core library.

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'
        }
      }
    }
  }
}
Copy the code

The packaged file is as follows

Of course, it can also be used by introducing 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
Copy the code

Demo production and deployment

To make a GIF, you first have to record a video, find any recording software (I forget what I’m using), record the process of using the component (just to show the general function), and then use the GIF tool to convert.

Recommended website: app.xunjiepdf.com/

I’m going to set it here to keep the original size, and then I’m going to convert.

After the conversion, the effect is ok.

Then put the converted GIF on the documentation to improve the documentation and attach the latest NPM version.

This is a real-time NPM graph that will be updated automatically when you release the latest version

nodei.co/

After completing the documentation, I started to make the online Demo, and created a warehouse ending with.github. IO by using the white whos service on The GitHub Page

Create a new branch gh-pages and configure the branch where the page takes effect.

So far, the documentation and online Demo have been supplemented. Let’s start the whole operation (automatic deployment).

Automatic deployment

In fact, AS I mentioned in a previous article, using Tarvise CI to automate deployment enables small version iterations, here it is: Portal

If you want a larger version, such as 1.0.0 -> 2.0.0 or something like this, you need to enter the version number manually.

Take a look at the dependencies needed:

"devDependencies": {
        "chalk": "^ 4.4.1"."fs": "0.0.1 ws-security"."inquirer": "^ 8.1.1"."log-symbols": "^ 4.1.0." "."ora": "^ 5.4.1." "."path": "^ 0.12.7"."shelljs": "^ 0.8.4"
}
Copy the code

Simple implementation of a Node script:

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();
// Execute the package script
const build_lib = async (srcipt) => {
	startLog(">>>> starts to execute <<<<");
	const res = shell.exec(`${srcipt}`);
	if (res.code === 0) {
		successLog("Project package success!");
	} else {
		errorLog("Project packaging failed, please try again!");
		process.exit(); // Exit the process}};// Check the package version
const check_version = async() = > {if(! fs.existsSync(package)) { errorLog("File does not exist!");
		return;
	}
	const data = fs.readFileSync(package);
	if (data) {
		const json = JSON.parse(data);
		infoLog(The current package version is:${json.version}`);
	} else {
		errorLog("Read failed!"); }};// Enter the version number
function set_version() {
	const list = [
		{
			name: "verison".message: "Please enter the iteration version number:",},];return inquirer.prompt(list);
}

// Change the version number
function edit_verison(v) {
	fs.readFile(package, "utf8".(err, data) = > {
		if (err) {
			errorLog("Read failed!");
		} else {
			const json = JSON.parse(data.toString());
			json.version = v;
			fs.writeFile(package, JSON.stringify(json, null."\t"), (e) = > {
				if (e) {
					errorLog("Write failed! Reason: / n", e); }}); }}); }/ / release NPM
// NPM will leave the token in the configuration file after logging in once
function publish_npm() {
	shell.exec("npm publish");
}
// Start the deployment log
function startLog(. content) {
	console.log(chalk.magenta(... content)); }// Information log
function infoLog(. content) {
	console.log(symbols.info, chalk.blue(... content)); }// Success logs
function successLog(. content) {
	console.log(symbols.success, chalk.green(... content)); }// Error log
function errorLog(. content) {
	console.log(chalk.red(... content)); }// Underline the key output
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");
	awaitpublish_npm(); }) ();Copy the code

Use FS and PATH to obtain paths and read files, ORA, symbols, chalk to beaut the terminal output, inquirer to achieve interaction, ShellJS to execute scripts.

The last

Welcome to point out my shortcomings, like friends remember to like the collection of three combos.