предисловие
Адрес гитхаба:github.com/Dark2017
Первый открытый исходный кодvue-dark-photo, компонент предварительного просмотра изображений, основанный на пакете vue2.0. До открытого исходного кода я испытал закрытую бета-версию для своих друзей и коллег, и, конечно же, результатом были различные предложения (плевки) 😱. Например, дополнительные динамические диаграммы позволяют пользователям примерно знать, какие функции существуют, какие функции можно удалить или оптимизировать и т. д.
самое началоvue-dark-photoПервое издание фактически было основано наelement uiделать проявку (на самом деле совершенно ненужно, удобно что-то рисовать 🐶), но вnpmТакже необходимо скачать при установке плагинelementТупо и не мало, потом убралelement, который зависит только отvue, так же есть очень полезная небольшая библиотека для скачиванияfile-saver. Примерно таковы общие зависимости, и когда версия vue на данный момент станет стабильной (добро пожаловать, чтобы поднять проблемы🐶), версия реакции будет расширена.
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, чтобы можно было использовать компоненты, импортируя файлы css и js через cdn npm. Например:
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
Демонстрационное производство и развертывание
хочу сделатьgifДля движущихся изображений вы должны сначала записать видео, найти программное обеспечение для записи (я забыл, что использовал), записать процесс использования компонентов (наглядно показать основные функции), а затем использовать программное обеспечение для передачи.gifинструмент может быть преобразован.
Рекомендуемый URL-адрес:app.xunjiepdf.com/
Установите его здесь, чтобы сохранить исходный размер, а затем запустите преобразование.
После преобразования эффект в порядке.
Затем поместите сконвертированную анимацию в документацию, улучшите документацию и прикрепите последнюю версию npm.
Это график npm в реальном времени. Когда вы выпустите последнюю версию, график будет обновляться автоматически. Пожалуйста, обратитесь к официальному сайту для получения подробной информации.
После дополнения документа начните делать онлайн-демонстрацию и используйте бесплатный сервис проституции на странице GitHub, чтобы создать новую с.github.ioсклад в конце
создать новую веткуgh-pages(не может быть), а потом настраивать егоpageДостаточно действующей ветки.
На данный момент документация и онлайн-демонстрация были дополнены, после чего начинается реорганизация (автоматическое развертывание).
Автоматическое развертывание
На самом деле, я упоминал об этом в статье ранее, используя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Используется для выполнения скриптов.
наконец
Добро пожаловать, чтобы указать на мои недостатки, и друзья, которым это нравится, не забудьте поставить лайк, подписаться и собрать три последовательных просмотра.