Задний план:
Я всегда хотел создать свой собственный интерфейс командной строки, но я никогда не мог понять, как вообще начать. Наконец, однако, с небольшой помощью из статей, которые я перечислю ниже, я сделал удобный интерфейс командной строки NPM под названием html-init, который позволяет вам создать новый базовый файл HTML в рабочем каталоге командной строки по указанному пути. пользователем. Если вы не знакомы с этими терминами, это в основном означает, что вы можете запустить код
html-init path/to/file.html
в командной строке (или терминале, как бы вы это ни называли), и он создаст этот файл в любом каталоге (папке), в котором вы находитесь, с некоторым базовым начальным HTML.
В этой статье вы узнаете, как создать инструмент командной строки с такими же функциями.
Как:
Наконец-то я нашел отличный ресурс на JavaScriptPlayground.com, в котором рассказывалось, как создать базовый интерфейс командной строки NPM. Хотя это было очень полезно и, наконец, дало мне отправную точку, оно все же содержало несколько технических терминов. В оставшейся части этой статьи я постараюсь объяснить все понятно.
Сначала запустите npm init и введите информацию о пакете. Вы можете просто нажать Enter несколько раз, чтобы получить пакет по умолчанию, или вы можете заполнить поля.
Затем отредактируйте файл package.json, чтобы он выглядел следующим образом:
{
"name": "whatever-you-want-to-call-it",
"version": "1.0.0",
"description": "A simple CLI tool allowing you to create a basic HTML file",
"main": "index.js",
"keywords": [
"html"
],
"author": "Your name",
"license": "ISC",
"preferGlobal": true,
"bin": {
"html-init": "index.js"
},
"dependencies": {
"fs-extra": "^4.0.2"
},
}
preferGlobal имеет значение true, потому что он предназначен для глобальной установки (это означает, что пакет npm не просто установлен в одном репозитории, поэтому пользователь может получить к нему доступ из любого места на компьютере). Если кто-то попытается установить ваш модуль без --global тег, они получат предупреждение о том, что он предназначен для глобальной установки.
Вы также заметите, что под bin есть следующий код:
"html-init": "index.js"
Это чрезвычайноважно. Это означает, что когда пользователь запускает html-init через командную строку, запускается index.js. ЭТО БАЗОВАЯ НАСТРОЙКА для нашего инструмента командной строки. Конечно, html-init можно заменить на любое другое имя скрипта, и то же самое с index.js.
Осталось сделать только одно, чтобы ваш модуль заработал: отредактируйте файл index.js. Мой файл выглядит так:
#! /usr/bin/env node
const fse = require('fs-extra');//Require the fs-extra module for file modification
var basicHTML = `
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
</body>
</html>
`;//Set what you want your basic HTML document to look like
const file = process.cwd() + "/" + process.argv[2];
fse.outputFile(file, basicHTML)//Output file at filepath with basic HTML Content
.then(() => fse.readFile(file, 'utf8'))
.then(data => {
console.log(data) //console.log(process.argv[2] + " created with content : " + data)
})
.catch(err => {//If there's an error, log the error
console.error(err)
})
Верхняя линия, которую иногда называют «линией шебанга», просто должна быть — не беспокойтесь об этом прямо сейчас. Вы заметите, что я требую fs-extra . Это чрезвычайно полезный модуль NPM для редактирования/создания файлов.
process.argv — это массив, содержащий все аргументы командной строки, переданные в index.js. Первые 2 аргумента не имеют значения, просто посмотрите на последующие. process.argv[2] содержит параметр сразу после вызова html-init. Итак, если я наберу html-init index.html, process.argv[2] будет равно index.html.
process.cwd() получает каталог, в котором вы находитесь, в командной строке. Итак, если ваша командная строка выглядит так: C:/Users/username> (это на компьютере с Windows), то это то, что будет оцениваться process.cwd().
Остальной код довольно прост. var basicHTML устанавливается в литерал шаблона, содержащий содержимое базового HTML-файла. Не беспокойтесь, если вы не знаете, что это такое, просто относитесь к нему как к строке.
const file = process.cwd() + “/" + process.argv[2] устанавливает путь к текущему рабочему каталогу плюс путь к файлу, который указан в аргументе после html-init (или любой другой команды, которую вы выберете).
Затем мы используем fse (это то, что мне нужно, но не забудьте вызвать функцию с любым именем, которое вам нужно), чтобы вывести содержимое basicHTML в file (куда мы хотим, чтобы документ попал).
Теперь у вас есть инструмент командной строки! Имейте в виду: при выводе с помощью fs-extra он перезапишет данные файла, если этот файл существует, или создаст новый файл. Будь осторожен!
Чтобы протестировать свой инструмент, создайте новый каталог, перейдите в него и запустите html-init index.html . Затем откройте index.html в своем любимом текстовом редакторе (рекомендую Light Table), и он должен иметь базовый HTML-контент!
Следующие шаги:
Поиграйте с кодом! Помните, что вы можете передать несколько аргументов с помощью process.argv[3] или process.argv[4] и т. д.! Проявите творческий подход! Если вы хотите посмотреть на мой текущий код, вы можете найти его здесь.
Ресурсы:
