Как правильно создать и опубликовать инструмент Deno CLI

Одна интересная особенность среды Ember заключается в том, что она имеет интерфейс командной строки Ember для создания компонента, шаблона или маршрута. Это значительно экономит время, и даже больше, ember generate componentгенерирует не только компонент, но и тестовый файл для QUnit. Давайте посмотрим, как создать инструмент Deno CLI, чтобы сделать что-то подобное для React.

В этом руководстве по Deno мы увидим, как создать инструмент командной строки Deno с помощью TypeScript, как загрузить зависимости из стандартной библиотеки Deno. Мы рассмотрим, как читать каталог и записывать файл. Наконец, мы научимся публиковать наш модуль Deno на GitHub и запускать его непосредственно из этого места, а также устанавливать его локально, чтобы он мог работать без подключения.

Обзор

Инструмент CLI, который мы создадим в этом руководстве по Deno, примет имя компонента, переданное через командную строку, и сгенерирует каталог и файл с кодом для функционального компонента React.

Я создал более полную версию, которая также создает таблицу стилей SASS и тестовый файл, подходящий для Jest и Enzyme. Скоро будет добавлено больше шаблонов настроек и компонентов (например, использующих хуки, Redux, Router или все сразу).

Однако для простоты в этом руководстве по Deno будут рассмотрены основы: чтение параметров и запись файлов, и мы напишем один файл. Остальное — манипуляции со строками и написание контента, ничего особенного. Вы можете получить доступ к полному инструменту Deno CLI для создания компонента React с помощью SASS и Jest в репозитории в конце этой статьи.

Установить Дено

Чтобы запустить этот инструмент 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 для IDE JetBrain.

Теперь запустите этот модуль с помощью:

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 прямо из GitHub:

deno run --allow-read --allow-write https://raw.githubusercontent.com/YOUR-GITHUB-USER/a-deno-module/master/mod.ts button

Deno загрузит инструмент, проверит зависимости и при необходимости установит их. Результат будет таким же, как и выше, будут созданы каталоги и файл.

Чтобы не писать все это (или искать в оболочке), 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, опубликовали его и установили локально.

Инструмент Deno CLI для создания компонента React

Как упоминалось в начале этого руководства по Deno, я создал более полную версию этого инструмента, и вы можете получить доступ к репозиторию для этого инструмента здесь:

https://github.com/eliorivero/react-generate-component

Это только один модуль Deno, созданный на TypeScript и создающий следующие файлы:

• index.js, функциональный компонент React
• style.scss, его таблица стилей SASS
• test.js, простой тест с использованием Jest и Enzyme

На рисунке ниже показано, как этот инструмент Deno работает после установки:

Он принимает составные имена, разделенные дефисом. Например, передача nav-barсоздаст компонент с именем NavBar. Вы также можете указать собственный путь к каталогу, отличный от пути по умолчанию app/components, или нет, и продолжать использовать путь по умолчанию.