Рубрики
Без рубрики

Лучшие инструменты, которые помогут вам создать свой проект JavaScript с открытым исходным кодом

Недавно я опубликовал пакет на НПМ: структуры данных и библиотека алгоритмов, реализованные в JavaScript. Целью проекта является помощь другим учиться и понимать структуры и алгоритмы данных с точки зрения JavaScript. А не содержащий только фрагменты кода с сопровождающими объяснениями, проект подразумевается

Автор оригинала: FreeCodeCamp Community Member.

Недавно я опубликовал пакет на НПМ: структуры данных и библиотека алгоритмов, реализованные в JavaScript.

Целью проекта является помощь другим учиться и понимать структуры и алгоритмы данных с точки зрения JavaScript.

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

Если вы заинтересованы, проект можно найти на NPM здесь Отказ

Но, вместо того, чтобы говорить о самом проекте, что я хочу написать сегодня, – это все аккуратные инструменты, которые я узнал и использовал при создании проекта.

За последние шесть лет я работал над тоннами боковых проектов и демонстраций, но каждый из них очень заметно просто «проекты по питомцам». Они никоим образом не имеют качества, которые заставят их выглядеть профессиональными или готовыми.

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

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

Примечание : Эта статья предполагает, что вы уже знакомы с процессом создания простого пакета JavaScript и публикуете его на NPM.

Если нет, команда NPM имеет некоторые Отличная документация по началу работы Это будет прогуляться по инициализации проекта и шаги для публикации.

Так что давайте начнем.

Reettier – это самоуверенный код код, который автоматически форматирует ваш код для вас. Вместо того, чтобы просто использовать ESLINT, чтобы обеспечить соблюдение стандартов, ваша команда договорилась, красивее могут позаботиться о форматировании для вас.

Больше не беспокоиться о фиксации отступа и ширины линии! Я использую это специально для моего JavaScript, но он может обрабатывать много разных языков.

Вы можете проверить более красивые документы здесь: https://github.com/preetter/preetter.

STYLINT AUTOFORMATS Ваши CSS для вас. Подобно красивее, этот инструмент помогает вам держать ваши CSS чистые, заботясь о тяжелом подъеме для вас.

Вы можете проверить документы StyleLint здесь: https://github.com/stylelint/stylelint.

ESLINT обрабатывает весь мой другой подцингирование JavaScript для ловли синтаксических ошибок и обеспечения наилучшей практики.

Вы можете проверить документы Eslint здесь: https://eslint.org/

Peryizezen – это инструмент CLI, который проходит вас через писать свои сообщения. Он генерирует сообщение Commit для вас, основанное на вашем входе и гарантирует, что полученное сообщение Commit следует за обычным стандартом коммитов.

Вы можете проверить документы о пристанезена здесь: https://github.com/commitizen/cz-cli.

Приборы проверяют, что ваши сообщения Commit следуют за обычным стандартом коммитов. Пока вы используете Contuctizen, чтобы создать свои коммиты, вы не столкнетесь с любыми проблемами.

Реальное преимущество использования приятелей состоит в том, чтобы поймать, что разработчики написали самостоятельно, которые не следуют стандартам форматирования.

Вы можете проверить документы о приборами здесь: https://github.com/convental-changeLog/commitlint.

Стиральные линта бегают отрицания против кода, которые вы пытаетесь совершить. Это то, где вы можете подтвердить, что ваш код передает стандарты, применяемые более красивыми, Stylint и Eslint.

Вы можете проверить поэтапные документы здесь: https://github.com/okonet/Lint-Stage

Husky позволяет легко запустить git крючки.

Все ранее упомянутые инструменты могут проходить через Hasky на Git Hooks, таких как Предварительный коммит или Commit-Msg Так вот где происходит волшебство.

Например, я бегаю поставленные с линтами и моим модульным тестам во время Предварительный коммит Крюк, и я бегаю приятель во время Commit-Msg крюк. Это означает, что когда я пытаюсь проверить в моем коде, Husky делает все проверку, чтобы убедиться, что я придерживаюсь всех правил, которые я обеспечивающую в моем проекте.

Вы можете проверить Husky Docs здесь: https://github.com/typicode/husky

Rollup – это модуль Bundler для JavaScript. Требуется весь ваш исходный код и связывает его в файлы, которые вы действительно хотите распространять как часть вашего пакета.

Обычная мудрость, кажется, если вы создаете веб-приложение, вы должны использовать WebPack. И если вы строите библиотеку, вы должны использовать свертывание.

В моем случае я создал структуры данных и библиотеку алгоритмов, поэтому я решил использовать шаблон. Одним из преимуществ, по-видимому, вывод, что генерирует свернуты, значительно меньше, чем какие выходы WebPack.

Вы можете проверить документы Rollup здесь: https://rollupjs.org/guide/en/

Стандартная версия помогает автоматизировать вашу генерацию версий и изменений.

Ранее я упомянул инструменты, такие как приятель и приятель для форматирования ваших коммитов в соответствии с обычными коммитами. Почему вы можете спросить, это полезно?

Ответ, по крайней мере, частично, состоит в том, что с помощью согласованного формата сообщения Commit, вы можете использовать инструменты, которые могут понять, что делают ваши коммиты.

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

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

Вы можете проверить стандартную версию Docs здесь: https://github.com/Convential-ChangeLog/Sstandard-version.

TRAVIS CI – это инструмент непрерывной интеграции (CI), который может быть интегрирован с GitHub, где мой код будет размещен.

Инструменты CI важны, потому что они позволяют вашему коммуникациям быть проверенным еще раз, прежде чем объединить их в свою главную ветку. Вы можете спорить, используя TRAVIS CI и инструмент, такой как функциональность Husky Duplicates, но важно иметь в виду, что даже хаски можно обойтись, передавая --no-проверить Флаг к вашей команде Commit.

Через GitHub вы можете указать, что ваша работа TRAVIS CI должна быть передана до того, как код может быть объединен, поэтому это добавляет еще один слой защиты и проверяет, что только передающий код входит в ваш репо.

Вы можете проверить документы Travis CI здесь: https://docs.travis-ci.com/

CodeCov – это еще один инструмент CI, который смотрит на покрытие кода вашего проекта.

Я пишу тесты JavaScript Unit, используя шутку. Часть моего задания TRAVIS CI запускает мою тестовую набор и гарантирует, что все они проходят. Он также проводит вывод охвата кода в CodeCov, который затем может проверить, если мой код Code проскальзывает или оставаясь высоким. Он также может быть использован в сочетании с значками GitHub, который мы поговорим о следующем.

Вы можете проверить документы Codecov здесь: https://docs.codecov.io/docs.

Вы когда-нибудь смотрели на проект в Github и видели мало значков возле вершины Readme? Такие вещи, подобные, проходит ли сборка, какое покрытие кода, и какая последняя версия пакета NPM может быть показана с использованием значков.

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

Вы можете проверить Shields.io Docs здесь: https://shields.io/

Немного документации проходит долгий путь. В моем проекте я добавил README, CHANGELOG, вклад в соответствии с рекомендациями, кодекс поведения и лицензию.

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

Вы можете проверить документацию для моего проекта здесь: https://github.com/thawkin3/js-data-structures-and-algorithms.

Знаете ли вы, что вы можете создавать шаблоны в Github для таких вещей, как отчеты об ошибках, запросы на функции и запросы на потяну? Создание этих шаблонов делает его кристально чистым, например, какую информацию, которую кто-то следует ожидать, чтобы обеспечить при подаче ошибки.

Вы можете проверить шаблоны GitHub здесь: https://help.github.com/en/github/building-a-strong-community/about-issue-and-pull-Request-templates.

Вот и все. Когда я впервые продемонстрировал этот проект некоторым друзьям, один из них прокомментировал: «О, мой построить инструмент суп!» И он может быть прав. Это много. Но я твердо верю, что добавление все приспособления выше, стоит того. Это помогает автоматизировать много вещей и помогает сохранить вашу кодовую базу чистой и в рабочем состоянии.

Моя самая большая вынос от создания этого проекта заключается в том, что настроив все вышеупомянутые, не так сложно, как может показаться. Каждый из этих инструментов имеет хорошую документацию и полезные гиды для начала. Это действительно не было так плохо, и вы должны чувствовать себя уверенно, принимая некоторые (если не все) из этих инструментов в вашем проекте тоже.

Счастливое кодирование!