Использование узловых модулей для предоставления офлайн-документации

Представляем Module Docs, пакет Node, который обслуживает файлы README из каталога node_modules ваших приложений.



Вы молодой, модный и активный разработчик? Я тоже, но я, как правило, занимаюсь разработкой приложений в ситуациях, когда у меня нет доступа к Интернету. К тому же я не модный. А молодость мимолетна.

Так или иначе.

Есть очень хорошие решения для получения offline-документации. На ум приходит DevDocs, потому что он предлагает отличное автономное хранилище документации для большого количества широко используемого программного обеспечения и имеет массу функций. Фактически, вам, вероятно, следует просто использовать это. Однако вы не можете просто добавить офлайн-документацию к любому пакету, который вам нужен. Происходит некоторая задержка.

Если существующее решение, такое как DevDocs, не соответствует вашим потребностям, вы можете использовать документацию, поставляемую с пакетами, которые вы установили в своем приложении. Верно, я говорю о README.md файлах.

На выходных ™ ️ у меня возникла идея создать небольшой инструмент CLI, который мог бы создать экспресс-сервер, который будет искать каталог node_modules и обслуживать содержимое README.md файла каждого пакета. Инструмент также предоставит вам веб-интерфейс для поиска node_modules пакетов. Он также может использовать IndexedDB для хранения избранного в автономном режиме.

Так я и сделал. Результатом является Документация модуля, и вы можете установить его как пакет Node.

Вы можете установить его глобально или для каждого проекта. После установки запустите cli, запустив:

$ module-docs start

Вы можете создать сценарий npm, который будет автоматически запускаться module-docs как часть процесса разработки. Вот как я его использую:

{
...
  "scripts:" {
    "start": "npm run start:docs && webpack-dev-server",
    "start:docs": "module-docs start"
  }
...
}

Вы можете настроить module-docs для каждого проекта, в котором хотите его использовать, создав module-docs.config.js файл в корне каталога этих проектов. В настоящее время вы можете предоставить массив имен пакетов для включения в избранное, например:

// module-docs.config.js
module.exports = {
   favorites: ["react", "react-apollo", "react-apollo-hooks"]
}

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

Создание CLI

Чтобы создать cli, я буду использовать commander.js, очень популярный инструмент для создания интерфейса командной строки.

Это отправная точка для всего пакета module_docs. Это то, что позволяет вам запустить module-docs start для запуска экспресс-сервера. Посмотрим на сервер.

Сборка сервера

Сервер представляет собой довольно простую сборку сервера Node с использованием Express. Он использует webpack-dev-middleware для создания сервера разработки, который будет обслуживать приложение React для веб-интерфейса.

Как видите, есть две конечные точки API. Первая конечная точка обрабатывает получение имен каталогов из node_modules. Вторая конечная точка получает README содержимое и анализирует package.json информацию о пакете. В настоящее время пользовательский интерфейс просто отображает версию пакета и ссылку на домашнюю страницу пакета, если таковая имеется.

Для обработки запроса POST я создал FileController. Вот где вся тяжелая работа.

FileController

Этот файл определенно можно было бы подвергнуть некоторому рефакторингу. При этом я разобью этот файл на части. Во-первых, служебные функции и импорт:

Важно отметить, что я создал черный список файлов, которые нужно исключить из поиска, поскольку они находятся в node_moudles, но бесполезны для наших целей. Я уверен, что этот список не исчерпывающий.

Кроме того, мы должны предоставить список подкаталогов (дочерних), которые содержат файлы README и package.json, на случай, если рассматриваемый пакет является монорепозиторием или пакетом с ограниченной областью видимости, например babel. Это то, что делает getPackagesFromChildren.

Вышеупомянутые служебные функции будут использоваться в FileController обработчиках. Давайте посмотрим на них.

Это почти все, что касается серверной части.

Что касается внешнего интерфейса, он построен с использованием React (на момент написания 16.8-alpha, поэтому я могу использовать эти сладкие сладкие крючки). Лучше всего открыть CodeSandbox ниже и поэкспериментировать с кодом интерфейса в каталоге client.



Заворачивать

Неплохо для выходных. Я собираюсь продолжить работу над некоторыми другими функциями, которые я лично хотел бы использовать, например, возможность добавлять собственные примечания к каждому пакету, а также иметь возможность связывать и получать документацию, а также сохранять ее в автономном режиме. Дайте мне знать, что вы думаете!

Рамзи - разработчик полного цикла JavaScript в компании по анализу данных в Спрингфилде, штат Вирджиния. Вы можете подписаться на него в твиттере или гитхабе. Ему нравится, когда ты это делаешь.