Русский
Русский
English
Статистика
Реклама

Yarn

SEO npm-пакета почему важно правильно настраивать конфиг и писать тесты

07.09.2020 02:17:11 | Автор: admin

Не так давно я опубликовал статью о своем CLI для React-компонент, который для меня стал первым публичным npm-пакетом. И так как мне хотелось поделиться своими наработками с как можно большим кругом разработчиков я начал изучать разные способы улучшения своей позиции в поисковой выдаче на разных специализированных сайтах. В попытках улучшить свое положение я опирался на поиск в npm, yarn и npms. И если вы сейчас откроете страничку моего пакета в любом из этих трех сайтов, то результаты там будут, к сожалению, достаточно скромными и я попробую объяснить почему и порассуждаю на эту тему.

Popularity, quality, maintainance

Если мы сделаем поиск в npm по любому запросу, то напротив каждого из пакетов будет указан набор из трех характеристик: popularity, quality и maintainance. Они в каком-то роде напоминают значения по пирам и сидам на каком-нибудь торрент-трекере и в достаточной мере влияют на выдачу и на последующий выбор людей.

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

Так как у нас пакет новый то popularity у нас само собой будет на нуле, поэтому будем смотреть на остальные два рейтинга. Quality мы оставим на десерт, а сначала поговорим о maintainance. И тут все достаточно просто, он отображает состояние пакета с точки зрения разработки. Либо его активно разрабатывают и поддерживают, либо на него забили и не занимаются. Тут учитывается то, как часто происходят коммиты, релизы, насколько много issue и как быстро они закрываются. В целом вроде все просто, но если в npms у меня этот показатель заполнен на 100%, потому что я активно дорабатываю пакет и прикручиваю новые фишки почти каждую неделю, то в npm у меня этот рейтинг только 33%. И как бы я не старался, выше он не поднимается. Более того, если взять любой другой популярный генератор кода, то окажется что все эти пакеты имеют данный рейтинг тоже равный 33%, что выглядит немного подозрительным. Даже у самого React этот рейтинг такой же.

Popularity у нас на нуле, maintainance на максимум, а что с quality? А тут все гораздо интереснее. Изначально я писал свою CLI на чистом js и без тестов. Но к тому моменту, когда я решил вытащить её в публичное поле я уже переписал её на Typescript и более или менее причесал, но все еще тестов не было. И я точно не помню сколько у меня был этот показатель качества, но думаю был примерно в районе 20%. Сейчас же я его разогнал до 61% и могу немного рассказать, как этого можно добиться. Причем я пытался применять сразу несколько практик одновременно, поэтому я до конца не уверен все ли они влияют, но даже если нет, то в целом это стоит того чтобы добавить в свой проект, если вы тоже решитесь опубликовать пакет.

У меня получился следующий список настроек:

  1. В проекте должен быть настроен линтер. Я лично использую ESLint, возможно с TSLint пакетные менеджеры тоже нормально работают.

  2. Стоит написать хороший readme.mdи changelog.md и поддерживать их в актуальном состоянии

  3. Стоит добавить файл лицензии

  4. Не лишним будет добавить файл .editorconfig Не факт что оно влияет на рейтинг, но пригодиться если кто-то решит вам помочь с вашим пакетом. Хотя и линтер тоже с этим поможет.

  5. Также я подключил свой проект на github к Travis и создал для него конфиг с помощью файла .travis.yml. Когда я его подключал я преследовал исключительно цель попробовать подняться в рейтинге, однако это оказалось достаточно неплохим инструментом тестирования. Более того, в моем CLI очень важно чтобы все корректно работало как на Linux так и на Windows и для меня оказалось приятной неожиданностью, когда Travis прогнал мои тесты у себя на Linux и я поймал баг, о котором совсем не знал, потому что разрабатываю под виндой.

  6. Не уверен что это влияет на рейтинг, но достаточно важно корректно заполнить файл package.json. Указать в нем все скрипты, главный файл, описание и теги.

Ну и конечно помимо банальных настроек проекта нужно писать тесты. И чтобы рейтинг поднялся высоко, покрытие должно быть очень высоким. Как я уже сказал выше, итоговый рейтинг в npm у меня вышел равным 61%, при этом покрытие тестами у меня всего лишь 49%, ну и есть все эти настройки, указанные выше. На nmps все получше, там у меня 96%. Само собой, в первую очередь, я покрыл критическую функциональность пакета, поскольку с каждой новой фичей тестировать все кейсы становится все сложнее и сложнее, хотя в некоторых случаях я откровенно читерил и покрывал тестами файлы, в которых максимально сложно совершить ошибку, но зато тесты пишутся легко и покрытие растет очень дешево.

Цифры или PR

Ну хорошо, настроили мы проект, пушим в него часто и фиксим оперативно все баги, покрываем тестами, но что-то никто не приходит скачивать наш пакет. Открываем поиск того же npm, вбиваем релевантный запрос для нашего пакета и начинаем листать страницы: 1, 2, 3,... 21. Находим наш пакет на какой-нибудь очень далекой странице и как нам понять что пошло не так?

Начну, пожалуй, с одной забавной истории про одно поле. Когда я всеми силами пытался вытащить свой пакет в первые строчки yarn, я настраивал проект, писал тесты, выбирал теги получше и улучшал readme. Писал посты на reddit и пиарил пакет среди коллег. Из кожи вон лез, но пакет качали очень слабо, где-то скачиваний 20-30 в день было. И хоть даже это меня радовало, хотелось узнать, как на это повлиять и я начал смотреть что есть в пакетах конкурентов. Многие пакеты в поиске по релевантному для меня запросу были вообще не подходящими по сути и делали совершенно не то, что я как бы пытаюсь искать, но тем не менее были выше и я пытался выяснить почему. Первое что достаточно сомнительно выстреливает, когда мы говорим о поиске - это то что мелкие, крайне бесполезные пакеты, в которых 150 строк кода, покрытых тестами, вылезают в топ за счет невероятно высокого покрытия. Часто бывало так что у меня только index файл был длиннее чем пакеты, которые обходили меня в рейтинге, хотя при этом и популярными они тоже не были, потому что такой пакет может написать каждый за парочку часов. И вот я натыкаюсь на очередной пакет, который крайне маленький, бесполезный, но почему-то находящийся выше в yarn. Стало очень любопытно и я начал проглядывать каждый файл репозитория и сравнивать настройки со своими. И тут я вижу что единственное отличие моей репки, от репки конкурента - это поле description в package.json. Ну, я подумал, что вряд ли это мне как-то поможет, но почему бы его не добавить, а то я как-то про него забыл. В общем добавляю поле и на следующий день бац и +200 скачиваний, потом еще больше и еще. Более того, по одному из запросов в yarn я находился на 23 станице до которой вряд ли бы кто-то дошел, пытаясь найти нужный пакет, но, указав это поле, пакет оказался буквально на первой строчке поисковика.

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

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

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

Кто-то может сказать, что это из-за того что эта функциональность никому не нужна. И этот кто-то тоже окажется не прав, поскольку есть другие пакеты, которые решают схожую задачу, далеко не всегда лучше, но при этом имеют 15 тысяч скачиваний в месяц и более. Хотя, конечно там более старые, известные проекты, которые имеют не одну публикацию в интернете и много коллабораторов на github.

В целом я не удивлен что все работает именно так, поскольку если бы я зашел на страничку пакета у которого 150 скачиваний в неделю, я бы скорее всего тоже даже описание не начал бы читать, поскольку все мы привыкли доверять чему-то очень популярному и проверенному, даже если у этого чего-то 200 issue.

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

Подробнее..

Основные команды bash, git, npm и yarn, а также немного о package.json и semver

05.10.2020 14:22:06 | Автор: admin
Доброго времени суток, друзья!

Предлагаю вашему вниманию небольшую шпаргалку по основным командам bash, git, npm, yarn, package.json и semver.

Условные обозначения: [dir-name] означает название директории, | означает или.

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

Без дальнейших предисловий.

Оглавление:


bash


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

Установка: в моем случае bash был установлен вместе с git.

Справка:

help

История команд:

history

Очистка терминала:

clear

Выход из терминала:

exit

Создание директории:

// make directorymkdir [dir-name]// примерmkdir my-app// несколько диреторийmkdir -p {dir1,dir2}// несколько вдложенных директорийmkdir -p my-app/{css,js}

Смена директории:

// change directorycd [dir-name]// примерcd my-app// сразу после созданияcd !$// родительская директорияcd ..// на два уровня вышеcd ../..// предыдущая директорияcd -// домашняя директорияcd ~

Путь к текущей директории:

// print work directorypwd

Список файлов:

// listls// включая скрытые файлыls -a | -f// больше информации// например, права доступаls -l

Создание файла:

touch [file-name]// примерtouch index.html// несколько файловtouch my-app/{index.html,css/style.css,js/script.js}

Содержимое файла:

cat [file-name]// примерcat index.html// сортировка и выборка уникальных значенийcat [file-name] | sort | uniq// меньше контентаless [file-name] // q - exit// n строк с начала файлаhead -50 [file-name]// n строк с конца файлаtail -50 [file-name]// поиск словаgrep [string] [file-name]// распаковка и просмотр содержимого архиваunzip [achive-name]// тип файлаfile [file-name]

Копирование, перемещение и удаление файла:

// copycp [file1] [file2]// movemv [file1] [file2]// пример// перемещение всех файлов из одной директории в другуюmv [dir1]/*.* [dir2]// removerm [file-name]// удаление пустой директорииrmdir [dir-name]// удаление непустой директорииrm -r [dir-name]// илиrm -rf [dir-name]

Вывод в терминал строки:

echo [string]// примерecho hello// создание или перезапись файлаecho hello > greet.txt// добавление строки в файлecho hello >> greet.txt

Загрузка файла:

wget [url]

Коннекторы:

true && echo hellofalse || echo helloecho hello ; ls

Конвейер:

// количество переносов строки - \ncat [file] | wc -l

git


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

Книга Pro Git.

Скринкаст Ильи Кантора.

Быстрый старт: Git How To.

Установка: git-scm.com.

Проверка установки:

git --version

Справка:

git helpgit help [command-name]git [command-name] --help | -h

Минимальные настройки:

// --local - настройки для текущего репо// --global - настройки для текущего пользователя// --system - настройки для всей системы, т.е. для всех пользователейgit config --global user.name "My Name"git config --global user.email "myemail@example.com"

Дополнительные настройки:

// список глобальных настроекgit config --list | -l --global// редактирование глобальных настроекgit config --global --edit | -e

Создание репозитория:

git init

Очистка репозитория:

// -d - включая директории, -x - включая игнорируемые файлы, -f - принудительнаяgit clean | -dxf

Удаление файлов и директорий:

// removegit rm [file-name]git rm -r [dir-name]git rm --force | -f

Перемещение файлов:

// git add + git remove// movegit mv [old-file] [new-file]

Просмотр состояния репозитория:

git status

Добавление изменений:

git add [file-name]git add --force | -f// все файлыgit add . | --all | -A// для добавления пустой директории можно создать в ней пустой файл .gitkeep

Добавление сообщения (коммита):

// редактирование коммитаgit commit// коммит для одного изменения, если не выполнялось git add . | -A// если выполнялось, сообщение будет добавлено для всех измененийgit commit --message | -m "My Message"// для всех изменений, если git add [file-name] выполнялось несколько разgit commit --all | -a -m | -am "My Message"// исправление коммитаgit commit --amend "My Message" | --no-edit

Просмотр коммита:

// последний коммитgit show// другой коммитgit show [hash] // минимум первые 4 символа// поиск изменений по сообщению или части сообщенияgit show :/[string]// поиск коммита по тегуgit show [tag-name]

Просмотр разницы между коммитами:

git diff HEAD | @ // HEAD - как правило, текущая ветка; @ - алиас для HEAD// stagedgit diff --staged | --cachedgit diff [hash1] [hash2]// разница между веткамиgit diff [branch1]...[branch2]// просмотр разницы между коммитами при редактировании сообщенияgit commit --verbose | -v// кастомизация выводимого сообщенияgit diff --word-diff | --color-words

Просмотр истории изменений:

git log// n - количество измененийgit log -n// --since, --after - после// --until, --before - до// разницаgit log -p// быстрое форматированиеgit log --graph --oneline --stat// кастомное форматированиеgit log --pretty=format// примерgit log --pretty=format:'%C(red)%h %C(green)%cd %C(reset)| %C(blue)%s%d %C(yellow)[%an]' --date=short | format-local:'%F %R'// поиск изменений по слову, файлу, ветке; i - без учета регистраgit log --grep | -G [string] | [file] | [branch] & -i// поиск по нескольким строкамgit log --grep [string1] --grep [string2] --all-match// поиск в определенном блоке файлаgit log -L '/<head>/','/<\/head>/':index.html// поиск по авторуgit log --author=[name]

Отмена изменений:

git reset// --hard - включая рабочую директорию и индекс// --soft - без рабочей директории и индекса// --mixed - по умолчанию: без рабочей директории, но с индексомgit reset --hard [hash] | @~ // @~ - последний коммит в HEAD// аналогичноgit reset --hard ORIG_HEAD// не путать с переключением веткиgit checkoutgit restore

Работа с ветками:

// список ветокgit branch// создание веткиgit branch [branch-name]// переключение на веткуgit checkout [branch-name]// branch + checkoutgit checkout -b [branch-name]// переименованиеgit branch -m [old-branch] [new-branch]// удаление веткиgit branch -d [branch-name]// слияние ветокgit merge [branch-name]

Разрешение конфликтов при слиянии:

// обычно, при возникновении конфликта, открывается редактор// принять изменения из сливаемой веткиgit checkout --ours// принять изменения из текущей веткиgit checkout --theirs// отмена слиянияgit reset --mergegit merge --abort// получение дополнительной информацииgit checkout --conflict=diff3 --merge [file-name]// продолжить слияниеgit merge --continue

Удаленный репозиторий:

// клонированиеgit clone [url] & [dir]// просмотрgit remotegit remote showgit remote add [shortname] [url]git remote rename [old-name] [new-name]// получение изменений// git fetch + git mergegit pull// отправка измененийgit push

Теги:

// просмотрgit tag// легковесная меткаgit tag [tag-name]//примерgit tag v1-beta// аннотированная меткаgit tag -a v1 -m "My Version 1"// удалениеgit tag -d [tag-name]

Отладка

git bisectgit blamegit grep

Сохранение незакоммиченных изменений:

// сохранениеgit stash// извлечениеgit stash pop

Копирование коммита:

git cherry-pick | -x [hash]// если возник конфликт// отменаgit cherry-pick --abort// продолжитьgit cherry-pick --continuegit cherry-pick --no-commit | -n// --cherry = --cherry-mark --left-right --no-mergesgit log --oneline --cherry [branch1] [branch2]

Перебазирование:

git rebase [branch]// при возникновении конфликта// отменаgit rebase --abort// пропуститьgit rebase --skip// продолжитьgit rebase --continue// предпочтение коммитов слиянияgit rebase --preserve-merges | -p// интерактивное перебазированиеgit rebase -i [branch]

Автозавершение повторных конфликтов:

// rerere - reuse recorder resolution// rerere.enabled true | false// rerere.autoUpdate true | false// rerere-train.sh - скрипт для обучения rereregit rerere forget [file-name]

Обратные коммиты:

git revert @ | [hash]// отмена слияния// git reset --hard @~ не сработаетgit revert [hash] -m 1// git merge [branch] не сработает// отмена отменыgit revert [hash]// повторное слияние с rebasegit rebase [branch1] [branch2] | --onto [branch1] [hash] [branch2]git merge [branch]git rebase [hash] --no-ff

Пример алиасов (сокращений) для .gitconfig:

[alias]    aa = add -A    co = checkout    ci = commit -m    st = status    br = branch

Пример .gitconfig:
[user]name = [My Name]email = [myemail@example.com]username = [myusername][core]editor = [myeditor]whitespace = fix,-indent-with-non-tab,trailing-space,cr-at-eolpager = delta[web]browser = google-chrome[instaweb]httpd = apache2 -f[rerere]enabled = 1autoupdate = 1[push]default = matching[color]ui = auto[color "branch"]current = yellow boldlocal = green boldremote = cyan bold[color "diff"]meta = yellow boldfrag = magenta boldold = red boldnew = green boldwhitespace = red reverse[color "status"]added = green boldchanged = yellow bolduntracked = red bold[difftool]prompt = false[delta]features = line-numbers decorationsline-numbers = true[delta "decorations"]minus-style = red bold normalplus-style = green bold normalminus-emph-style = white bold redminus-non-emph-style = red bold normalplus-emph-style = white bold greenplus-non-emph-style = green bold normalfile-style = yellow bold nonefile-decoration-style = yellow boxhunk-header-style = magenta boldhunk-header-decoration-style = magenta boxminus-empty-line-marker-style = normal normalplus-empty-line-marker-style = normal normalline-numbers-right-format = "{np:^4} "[github]user = [username]token = token[gitflow "prefix"]versiontag = v[sequence]editor = interactive-rebase-tool[alias]a = add --allai = add -i###ap = applyas = apply --statac = apply --check###ama = am --abortamr = am --resolvedams = am --skip###b = branchba = branch -abd = branch -dbdd = branch -Dbr = branch -rbc = rev-parse --abbrev-ref HEADbu = !git rev-parse --abbrev-ref --symbolic-full-name "@{u}"bs = !git-branch-status###c = commitca = commit -acm = commit -mcam = commit -amcem = commit --allow-empty -mcd = commit --amendcad = commit -a --amendced = commit --allow-empty --amend###cl = clonecld = clone --depth 1clg = !sh -c 'git clone git://github.com/$1 $(basename $1)' -clgp = !sh -c 'git clone git@github.com:$1 $(basename $1)' -clgu = !sh -c 'git clone git@github.com:$(git config --get user.username)/$1 $1' -###cp = cherry-pickcpa = cherry-pick --abortcpc = cherry-pick --continue###d = diffdp = diff --patiencedc = diff --cacheddk = diff --checkdck = diff --cached --checkdt = difftooldct = difftool --cached###f = fetchfo = fetch originfu = fetch upstream###fp = format-patch###fk = fsck###g = grep -p###l = log --onelinelg = log --oneline --graph --decorate###ls = ls-fileslsf = !git ls-files | grep -i###m = mergema = merge --abortmc = merge --continuems = merge --skip###o = checkoutom = checkout masterob = checkout -bopr = !sh -c 'git fo pull/$1/head:pr-$1 && git o pr-$1'###pr = prune -v###ps = pushpsf = push -fpsu = push -upst = push --tags###pso = push originpsao = push --all originpsfo = push -f originpsuo = push -u origin###psom = push origin masterpsaom = push --all origin masterpsfom = push -f origin masterpsuom = push -u origin masterpsoc = !git push origin $(git bc)psaoc = !git push --all origin $(git bc)psfoc = !git push -f origin $(git bc)psuoc = !git push -u origin $(git bc)psdc = !git push origin :$(git bc)###pl = pullpb = pull --rebase###plo = pull originpbo = pull --rebase originplom = pull origin masterploc = !git pull origin $(git bc)pbom = pull --rebase origin masterpboc = !git pull --rebase origin $(git bc)###plu = pull upstreamplum = pull upstream masterpluc = !git pull upstream $(git bc)pbum = pull --rebase upstream masterpbuc = !git pull --rebase upstream $(git bc)###rb = rebaserba = rebase --abortrbc = rebase --continuerbi = rebase --interactiverbs = rebase --skip###re = resetrh = reset HEADreh = reset --hardrem = reset --mixedres = reset --softrehh = reset --hard HEADremh = reset --mixed HEADresh = reset --soft HEADrehom = reset --hard origin/master###r = remotera = remote addrr = remote rmrv = remote -vrn = remote renamerp = remote pruners = remote showrao = remote add originrau = remote add upstreamrro = remote remove originrru = remote remove upstreamrso = remote show originrsu = remote show upstreamrpo = remote prune originrpu = remote prune upstream###rmf = rm -frmrf = rm -r -f###s = statussb = status -s -b###sa = stash applysc = stash clearsd = stash dropsl = stash listsp = stash popss = stash savessk = stash save -ksw = stash showst = !git stash list | wc -l 2>/dev/null | grep -oEi '[0-9][0-9]*'###t = tagtd = tag -d###w = showwp = show -pwr = show -p --no-color###svnr = svn rebasesvnd = svn dcommitsvnl = svn log --oneline --show-commit###subadd = !sh -c 'git submodule add git://github.com/$1 $2/$(basename $1)' -subrm = !sh -c 'git submodule deinit -f -- $1 && rm -rf .git/modules/$1 && git rm -f $1' -subup = submodule update --init --recursivesubpull = !git submodule foreach git pull --tags origin master###assume = update-index --assume-unchangedunassume = update-index --no-assume-unchangedassumed = !git ls -v | grep ^h | cut -c 3-unassumeall = !git assumed | xargs git unassumeassumeall = !git status -s | awk {'print $2'} | xargs git assume###bump = !sh -c 'git commit -am \"Version bump v$1\" && git psuoc && git release $1' -release = !sh -c 'git tag v$1 && git pst' -unrelease = !sh -c 'git tag -d v$1 && git pso :v$1' -merged = !sh -c 'git o master && git plom && git bd $1 && git rpo' -aliases = !git config -l | grep alias | cut -c 7-snap = !git stash save 'snapshot: $(date)' && git stash apply 'stash@{0}'bare = !sh -c 'git symbolic-ref HEAD refs/heads/$1 && git rm --cached -r . && git clean -xfd' -whois = !sh -c 'git log -i -1 --author=\"$1\" --pretty=\"format:%an <%ae>\"' -serve = daemon --reuseaddr --verbose --base-path=. --export-all ./.git###behind = !git rev-list --left-only --count $(git bu)...HEADahead = !git rev-list --right-only --count $(git bu)...HEAD###ours = "!f() { git checkout --ours $@ && git add $@; }; f"theirs = "!f() { git checkout --theirs $@ && git add $@; }; f"subrepo = !sh -c 'git filter-branch --prune-empty --subdirectory-filter $1 master' -human = name-rev --name-only --refs=refs/heads/*[filter "lfs"]clean = git-lfs clean -- %fsmudge = git-lfs smudge -- %fprocess = git-lfs filter-processrequired = true


Пример .gitignore:
### Node #### Logslogsnpm-debug.log*yarn-debug.log*yarn-error.log*# Optional npm cache directory.npm# Dependency directories/node_modules/jspm_packages/bower_components# Yarn Integrity file.yarn-integrity# Optional eslint cache.eslintcache# dotenv environment variables file(s).env.env.*#Build generateddist/build/# Serverless generated files.serverless/### SublimeText #### cache files for sublime text*.tmlanguage.cache*.tmPreferences.cache*.stTheme.cache# workspace files are user-specific*.sublime-workspace# project files should be checked into the repository, unless a significant# proportion of contributors will probably not be using SublimeText# *.sublime-project### VisualStudioCode ###.vscode/*!.vscode/settings.json!.vscode/tasks.json!.vscode/launch.json!.vscode/extensions.json### Vim ###*.sw[a-p]### WebStorm/IntelliJ ###/.ideamodules.xml*.ipr*.iml### System Files ###*.DS_Store# Windows thumbnail cache filesThumbs.dbehthumbs.dbehthumbs_vista.db# Folder config fileDesktop.ini# Recycle Bin used on file shares$RECYCLE.BIN/# Thumbnails._*# Files that might appear in the root of a volume.DocumentRevisions-V100.fseventsd.Spotlight-V100.TemporaryItems.Trashes.VolumeIcon.icns.com.apple.timemachine.donotpresent


npm


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

Официальный сайт: npmjs.com.

Установка.

npm устанавливается вместе с Node.js.

Также вместе с Node.js устанавливается npx, позволяющий запускать исполняемые файлы без установки: npx create-react-app my-app.

Проверка установки:

node --version | -vnpm --version | -v

Обновление:

npm i -g npm@latest

Список доступных команд:

npm helpnpm help [command-name]

Инициализация проекта:

npm init// autonpm init --yes | -y

Установка зависимостей

npm install | i// проверка конкретной зависимостиnpm explore [package-name]// проверка всех зависимостейnpm doctor// очисткаnpm ci

Принудительная переустановка зависимостей:

npm i --force | -f

Установка только продакшн-пакетов:

npm i --only=production | --only=prod

Добавление зависимости:

npm i [package-name]npm i [package-name@version]// примерnpm i express

Добавление зависимости для разработки:

npm i --save-dev | -D [package-name]// примерnpm i -D nodemon

Обновление зависимости:

npm update | up [package-name]

Удаление зависимости:

// dependencynpm remove | rm | r [package-name]// devDependencynpm r -D [package-name]

Глобальная установка/обновление/удаление пакета:

npm i/up/r -g [package-name]// примерnpm i -g create-react-app// использованиеcreate-react-app my-app

Определение устаревших пакетов:

npm outdatednpm outdated [package-name]

Список установленных зависимостей:

npm list | ls// top levelnpm ls --depth=0 | --depth 0// global + top levelnpm ls -g --depth 0

Информация о пакете:

npm view | v [package-name]// примерnpm v reactnpm v react.description

Запуск скрипта/выполнение команды:

npm run [script]// пример// package.json: "scripts": { "dev": "nodemon server.js" }npm run dev// script start или node server.jsnpm startnpm stop

Удаление дублирующихся пакетов:

npm dedupe | ddp

Удаление посторонних пакетов:

npm prune

Обнаружение уязвимостей (угроз безопасности):

npm audit// jsonnpm audit --json// plain textnpm audit --parseable

Автоматическое исправление уязвимостей:

npm audit fix

yarn


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

Официальный сайт: yarnpkg.com.

Установка:

npm i -g yarn

Команда yarn dlx позволяет запускать исполняемые файлы без установки: yarn dlx create-react-app my-app. Для этого yarn необходимо обновить до второй версии: yarn set version berry.

Проверка установки:

yarn --version | -v

Обновление:

yarn set version latest

Список доступных команд:

yarn helpyarn help [command-name]

Инициализация проекта:

yarn init// autoyarn init --yes | -y// "private": true в package.jsonyarn init --private | -p// auto + privateyarn init -yp

Установка зависимостей:

yarn// илиyarn install// тихая установкаyarn install --silent | -s// проверкаyarn --check-files

Принудительная переустановка зависимостей:

yarn install --force

Установка только продакшн-пакетов:

yarn install --production | --prod

Добавление зависимости:

yarn add [package-name]yarn add [package-name@version]// примерyarn add express// тихая установкаyarn add --silent// илиyarn add -s

Добавление зависимости для разработки:

yarn add --dev | -D [package-name]// примерyarn add -D nodemon

Обновление зависимости:

yarn upgrade [package-name]

Удаление зависимости:

yarn remove [package-name]

Глобальная установка/обновление/удаление пакета:

yarn global add/upgrade/remove [package-name]// примерyarn global add create-react-app// использованиеcreate-react-app my-app

Список установленных зависимостей:

yarn list// top levelyarn list --depth=0 | --depth 0

Информация о пакете:

yarn info [package-name]// илиyarn why [package-name]// примерyarn info reactyarn info react descriptionyarn why webpack

Запуск скрипта/выполнение команды:

yarn [script]// илиyarn run [script]// пример// package.json: "scripts": { "dev": "nodemon server.js" }yarn dev

package.json


{  "name": "my-app",  "version": "1.0.0",  "description": "my awesome app",  "keywords": [    "amazing",    "awesome",    "best"  ],  "private": true,  "main": "server.js",  "license": "MIT",  "homepage": "https://my-website.com",  "repository": {    "type": "git",    "url": "https://github.com/user/repo.git"  },  "repository": "github:user/repo",  "author": {    "name": "My Name",    "email": "myemail@example.com",    "url": "https://my-website.com"  },  "author": "My Name <myemail@example.com> (http://personeltest.ru/aways/my-website.com)",  "contributers": [    {      "name": "Friend Name",      "email": "friendemail@example.com",      "url": "https://friend-website.com"    }  ],  "contributors": "Friend Name <friendemail.com> (http://personeltest.ru/aways/friend-website.com)",  "dependencies": {    "express": "^4.17.1"  },  "devDependencies": {    "nodemon": "^2.0.4"  },  "scripts": {    "start": "react-scripts start",    "dev": "nodemon server.js"  }}

  • name название проекта
  • version версия проекта (см. версионирование)
  • description описание проекта (зачем нужен пакет?)
  • keywords ключевые слова (облегчает поиск в реестре npm)
  • private установка значения в true предотвращает случайную публикацию пакета в реестре npm
  • main основная точка входа для функционирования проекта
  • repository ссылка на репозиторий (один из вариантов)
  • author автор проекта (один из вариантов)
  • contributors участники проекта (люди, внесшие вклад в проект)
  • dependencies зависимости проекта (пакеты, без которых приложение не будет работать)
  • devDependencies зависимости для разработки (пакеты, без которых приложение будет работать)
  • scripts команды (выполняемые сценарии, задачи), предназначенные для автоматизации, например, команда yarn dev запустит скрипт nodemon server.js

Полный список доступных полей файла package.json: npm-package.json

Файлы package-lock.json и yarn.lock содержат более полную информацию об установленных пакетах, чем package.json, например, конкретные версии пакетов вместо диапазона допустимых версий.

Версионирование


Каждый пакет имеет версию, состоящую из трех цифр (например, 1.0.0), где первая цифра мажорная версия (major), вторая минорная версия (minor), третья патчевая версия (патч, patch). Новые версии называются релизами.

Увеличение каждой из этих цифр согласно правилам семантического версионирования (semver) означает следующее:

  • major внесение несовместимых с предыдущей версией изменений
  • minor новая функциональность, совместимая с предыдущей версией
  • patch исправление ошибок, незначительные улучшения

Диапазоны версий или допустимые релизы определяются с помощью следующих операторов (компараторов):

  • * любая версия (аналогично пустой строке)
  • <1.0.0 любая версия, которая меньше 1.0.0
  • <=1.0.0 любая версия, которая меньше или равна 1.0.0
  • >1.0.0 любая версия, которая больше 1.0.0
  • >=1.0.0 любая версия, которая больше или равна 1.0.0
  • =1.0.0 только версия 1.0.0 (оператор "=" можно опустить)
  • >=1.0.0 <2.0.0 больше или равно 1.0.0 и меньше 2.0.0
  • 1.0.0-2.0.0 набор версий включительно
  • ^1.0.0 минорные и патчевые релизы (>=1.0.0 <2.0.0)
  • ~.1.0.0 только патчевые релизы (>=1.0.0 <1.1.0)

Подробные сведения о semver: node-semver.

Благодарю за внимание.
Подробнее..

Перевод Удобная платформа для подбора библиотек и фреймворков JavaScript openbase

15.10.2020 14:05:55 | Автор: admin
image

Что за зверь?


openbase.io

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

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

Как я обычно выбираю себе библиотеку



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

  1. Поискать в npm
  2. Подобрать айтемы, подходящие по описанию, имеющие достаточное количество загрузок и получавшие обновления в последние несколько месяцев.
  3. Проверить доступность документации и readme на GitHub; иногда проверять наличие обновлений по ключевым вопросам.
    Кстати, я стараюсь не принимать решение только по наличию или отсутствию документов. Как правило, они могут находиться в процессе релиза или экстренных правок, о чем можно узнать на issue board, где разработчики и юзеры могут контактировать друг с другом.

После этого, я выбираю несколько вариантов, быстро проверяю их и решаю, какие буду применять.

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

Плюсы openspace Ревью


Для моих изысканий идеально подошел сервис openbase.io

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

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

Например, на React оставлено более 570 отзывов.

Общая информация


image

Ревью


image

Плюсы openbase Можно сразу найти туториалы


На боковой панели есть вкладка tutorial, в которой вам все подробно разъяснят, в том числе через ролики на YouTube.

image

image

Плюсы openbase информация об альтернативных пакетах


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

image

Спасибо за прочтение!

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

Yarn 2 Устанавливаем и разбираемся

28.04.2021 22:20:56 | Автор: admin

Знакомство

Yarn 2 (Berry) это новый выпуск революционного и хорошо зарекомендовавшего себя менеджера пакетов Yarn, включающий в себя такие особенности, как: PlugnPlay, возможность расширения модульного API, оффлайн-кэш и улучшенную поддержку рабочих пространств.

PlugnPlay

Yarn PnP это новая функция, которая по умолчанию включена в Yarn 2. PnP избавляет проекты от папки node_modules в пользу файла.pnp.js.

Файл.pnp.js сопоставляет все пакеты, установленные в проекте, с тем местом, где Yarn разместил их на вашем диске. Это избавляет от большого количества операций ввода-вывода при генерации node_modules, обеспечивая более быструю и надёжную установку.

В новой документации Yarn подробно рассказываетсяо недостатках node_modules,как структуры папок, и объясняется, почему необходим новый взгляд на управление зависимостями.

Монорепозитории

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

Популярным рецептом настойки JavaScript монорепозитория является комбинация рабочих пространств Yarn и использование Lerna в качестве менеджера проектов.

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

Модульная архитектура, плагины

Сделав важный шаг вперед, Yarn 2 был переработан в пользу нового модульного API, расширяемого при помощью плагинов. В настоящее время большинство функций уже реализовано с их помощью дажеyarn addиyarn installявляются предустановленными плагинами!

Вы можете сами написать плагин для Yarn, а чтобы дать вам представление об этом процессе, разработчики Yarn создалиплагин TypeScript, который будет автоматически добавлять соответствующие@types/packagesкаждый раз, когда вы запускаетеyarn add.

Как начать работу?

Установка

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

Сначала установим глобальный Yarn, который мы будем использовать для создания локальных экземпляров:

 npm install -g yarn

Выполнив данную инструкцию (запускyarn --versionдолжен вывести что-то вроде1.22.x), перейдём к созданию каталога для запуска нового проекта:

 mkdir my-app cd my-app

Berry кодовое имя релизной ветки Yarn 2.
Изменим версию Yarn конкретно для каталогаmy-app:

 yarn set version berry

После выполнения данной команды установка будет завершена, и можно переходить к установке зависимостей!

Добавление зависимостей

Общие команды управления остались теми же, что и в предыдущих версиях:

  • yarn init инициализация проекта

  • yarn add <package> [--dev] добавление пакета

  • yarn remove <package> удаление пакета

  • yarn up <package> обновление пакета

Также, вы можете увидеть некоторые изменения консольного интерфейса в новой версии Yarn:

  • каждый набор связанных задач, выполняемых в процессе установки, сгруппирован;

  • почти все сообщения имеют собственные коды ошибок, которые можно найти вдокументации;

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

Установка React.js с Yarn-плагином TypeScript

Далеко не все пакеты поставляются с собственными определениями типов, но уже нет поводов для волнения, ведь там, где их нет, Yarn возьмёт работу на себя.

Перед выполнением операцией ниже, следует установить Yarn Berry для рабочей директории и убрать детей от экрана.

Инициализируем package.json и установим плагин TypeScript:

 yarn init yarn plugin import typescript

Проведем установку библиотеки React:

 yarn add react react-dom YN0000:  Resolution step YN0000:  Completed in 1s 932ms YN0000:  Fetch step YN0013:  loose-envify@npm:1.4.0 YN0013:  object-assign@npm:4.1.1 YN0013:  react-dom@npm:17.0.2 YN0013:  react@npm:17.0.2 YN0013:  scheduler@npm:0.20.2 YN0000:  Completed in 0s 502ms YN0000:  Link step YN0000:  Completed YN0000: Done in 2s 503ms

Зависимости @types/ были успешно установлены!

package.jsonpackage.json

Что в итоге

Ветка Yarn 1.x (Classic) уже официально перешла в статус поддержки, предполагающей только исправление уязвимостей.

Все новые функции будут разрабатываться исключительно для Yarn 2, версия которого будет распространяться черезyarn set version.

Если Yarn не подружится с вашей IDE, нужно будет кое-что установить. Не скучайте!

Подробнее..
Категории: Javascript , Typescript , Node.js , Yarn , Package manager

Категории

Последние комментарии

  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2024, personeltest.ru