Як правильно створити та опублікувати інструмент Deno CLI
Одна цікава особливість фреймворку Ember полягає в тому, що він має Ember CLI для створення компонента, шаблону або маршруту. Це значно економить час, і навіть більше, ember generate componentгенерує не лише компонент, але й тестовий файл для QUnit. Давайте подивимося, як створити інструмент Deno CLI, щоб зробити щось подібне для React.
У цьому посібнику Deno ми побачимо, як створити інструмент Deno CLI за допомогою TypeScript, як завантажити залежності зі стандартної бібліотеки Deno. Ми розглянемо, як читати каталог і писати файл. Нарешті, ми навчимося публікувати наш модуль Deno на GitHub і запускати його безпосередньо з цього місця, а також встановлювати його локально, щоб він міг працювати без підключення.
Огляд
Інструмент CLI, який ми створимо в цьому підручнику Deno, прийматиме назву компонента, передану через командний рядок, і створюватиме каталог і файл із кодом для функціонального компонента React.
Я створив більш повну версію цього, яка також створює таблицю стилів SASS і тестовий файл, придатний для Jest і Enzyme. Незабаром буде додано більше налаштувань і шаблонів компонентів (наприклад, тих, що використовують хуки, або Redux, або Router, або всі вони).
Заради простоти цей підручник Deno охопить основні моменти: читання параметрів і запис файлів, і ми напишемо один файл. Решта — маніпулювання рядками та написання додаткового вмісту, нічого особливого. Ви можете отримати доступ до повного інструменту Deno CLI для створення компонента React за допомогою SASS і Jest у репо в кінці цієї статті.
Встановити Deno
Щоб запустити цей інструмент Deno CLI, вам потрібно встановити середовище виконання. Якщо ви вже використовуєте Homebrew на macOS, ви можете швидко встановити Deno за допомогою:
brew install denoЯкщо ви не використовуєте Homebrew, ви можете встановити його за допомогою CURL:
curl -fsSL https://deno.land/x/install/install.sh | shІнші методи встановлення та системи описані в посібнику Deno.
Читання параметрів командного рядка в Deno
Найважливіше, що нам потрібно для нашого генератора, — це взяти назву компонента. Нам потрібно мати можливість передати назву компонента інструменту Deno. Створіть каталог і додайте файл під назвою mod.tsта вставте в нього це:
const { args: [name] } = Deno;
console.log( `Writing component ${ name }` );Тепер, коли ви додаєте Denoзмінну, ви, ймовірно, отримаєте попередження, залежно від вашого редактора коду та його підтримки TypeScript, про те, що він не може знайти Denoназву. Якщо ви використовуєте VS Code, ви можете вирішити цю проблему за допомогою офіційного розширення VS Code, щоб додати підтримку Deno. JetBrains також опублікував плагін для забезпечення підтримки Deno для JetBrain IDE.
Тепер запустіть цей модуль за допомогою:
deno run mod.tsПривіт Світ
Це відповість переданим нами параметром «HelloWorld»:
Writing component HelloWorld
приємно! Це працює!
Запис файлів за допомогою Deno
Давайте зараз запишемо файл. Спочатку нам потрібен вміст для нього, тому додайте його до mod.tsфайлу. Ми використаємо літерали шаблону JavaScript, щоб створити один рядок і вставити назву компонента та навіть викликати метод рядка, щоб зробити його малим регістром:
const compoContent: string = `import React from 'react';
import PropTypes from 'prop-types';
${name}.propTypes = {
};
function ${name}(props) {
return();
}
export default ${name};
`;Щоб записати це у файл, нам спочатку потрібно перевірити, чи існує каталог. Для цього ми використаємо ensureDirфункцію, яка є частиною стандартної бібліотеки Deno. Він створить каталог або каталоги, якщо вони не існують. Щоб наказати Deno використовувати цю залежність, просто додайте це у верхній частині файлу:
import { ensureDir } from "https://deno.land/std/fs/ensure_dir.ts";Коли ми запускаємо наш інструмент, Deno завантажить цей модуль, щоб використовувати його. Нарешті настав час записати файл за writeTestFileдопомогою команди середовища виконання Deno. Вставте наступне в кінці файлу:
Місцевий тест
Ми закінчили кодувати наш інструмент Deno CLI і тепер можемо його протестувати. Deno створено як безпечне середовище виконання, тому такі операції, як читання файлової системи або запис у неї, заборонені за умовчанням. Вам потрібно явно попросити Deno дозволити доступ до файлової системи. Він розділений на доступ для читання та доступ для запису. У цьому випадку нам потрібен дозвіл на читання, оскільки ensureDirспочатку потрібно прочитати каталог і перевірити його існування. Якщо ні, він створить його, а потім ми створимо файл. Для останніх двох завдань нам потрібен дозвіл на написання. Ось як ви можете його запустити:
deno --allow-read --allow-write mod.ts button
І ви матимете каталоги, створені разом із файлом, усі відносно папки, де ви виконуєте це, наприклад app/components/Button/index.js.
Опублікуйте модуль Deno
Поширювати модуль Deno просто. Ми докладно розглянули це в попередній публікації про створення та публікацію модуля Deno на GitHub. Вам потрібно ініціалізувати локальне сховище git:
git init
додайте та зафіксуйте свої файли:
git add .
git commit -m "Initial commit"
створіть репозиторій на GitHub або схожій службі та надішліть його. Наприклад, якщо ви створюєте репо з назвою a-deno-moduleна GitHub, ви можете запустити це локально, щоб відправити його в Інтернет:
git remote add origin git@github.com:YOUR-GITHUB-USER/a-deno-module.git<br>git push -u origin master
Використовуйте опублікований в Інтернеті модуль
Deno може запускати модулі безпосередньо з Інтернету та автоматично встановлювати свої залежності. Тепер, коли його розгорнуто, ви можете запустити наш інструмент Deno CLI безпосередньо з GitHub:
deno run --allow-read --allow-write https://raw.githubusercontent.com/YOUR-GITHUB-USER/a-deno-module/master/mod.ts buttonDeno завантажить інструмент, перевірить залежності та за потреби встановить їх. Результат буде таким же, як і вище, буде створено каталоги та файл.
Щоб уникнути необхідності писати все це (або шукати це в оболонці), Deno дозволяє встановити цей інструмент, щоб він працював офлайн:
deno install --allow-read --allow-write --name denomodu https://raw.githubusercontent.com/YOUR-GITHUB-USER/a-deno-module/master/mod.tsІнструмент буде називатися denomodu. Це створює виконуваний файл із командним рядком у певному каталозі, як /Users/%your-username%/.deno/binу macOS. Його змістом є команда для запуску інструменту та прийняття параметрів:
#!/bin/sh
deno "run" "--allow-read" "--allow-write" "https://raw.githubusercontent.com/eliorivero/react-generate-component/master/mod.ts" "$@"Отже, коли процес завершиться, якщо ви не додали ./deno/binшлях до змінної середовища PATH, Deno запропонує вам це зробити, щоб ви могли запустити інструмент.
Після додавання шляху до змінної PATH ви можете викликати інструмент:
denomodu button
Він набагато коротший і тепер працює без підключення до Інтернету. Щиро вітаю! Ви створили інструмент Deno CLI, опублікували його та встановили локально.
Інструмент Deno CLI для створення компонента React
Як згадувалося на початку цього підручника Deno, я створив більш повну версію цього, і ви можете отримати доступ до репо для цього інструменту тут:
https://github.com/eliorivero/react-generate-component
Це лише один модуль Deno, створений на TypeScript і створює ці файли:
index.js, функціональний компонент Reactstyle.scss, його таблицю стилів SASStest.js, простий тест із використанням Jest і Enzyme
На зображенні нижче показано, як цей інструмент Deno працює після встановлення:
Він приймає складені назви, розділені тире. Наприклад, передача nav-barстворить компонент під назвою NavBar. Ви також можете вказати настроюваний шлях до каталогу, відмінний від стандартного app/components, чи ні, і продовжувати використовувати шлях за замовчуванням.