В повседневной работе фронтенда часто возникает ситуация, когда «до (после) одну операцию нужно выполнить одновременно, другую операцию нужно выполнить одновременно», например, мы хотим запустить проверка кода eslint перед каждым коммитом git, проверка зависимостей проекта перед установкой npm и т. д. Как классический случай, различные инструменты позволяют нам запускать пользовательские скрипты, когда происходят определенные действия.Эта функция называется ловушками.hooks.
Инструменты, которые часто используются в повседневной жизни,npm,git,webpack,один из нихhooksМы вводим использование отдельно.
вwebpackКрючкиwebpackПерехватчики событий времени выполнения для разработчиков, которые мы можем использовать для написанияplugins, я не буду говорить об этом здесь, я напишу отдельную статью о написании в будущемpluginстатьи (установить флажок ╮(╯▽╰)╭).
npm hooks — слушайте операции npm / подписывайтесь на модификации исходного кода npm, чтобы получать уведомления
В настоящее время, говоря о хуках npm, есть две операции с разными концепциями.
В обычном смысле хуки, отслеживающие различные операции npm, настраиваютсяpackage.jsonв файлеscriptsполя реализованы.
а такжеnpm hooksпредоставляется нпмработа с командной строкой, цель состоит в том, чтобыПодпишитесь на конкретные изменения в нужном вам пакете npm, например, можно подписаться на последние (неправильные) новости и т.д. Конечно, эта функция требует, чтобы вы сами предоставили доменное имя, и вам необходимо иметь учетную запись npm и приобретать услуги, поэтому я не буду обсуждать это больше ╮(╯▽╰)╭, подробнее см.официальная документация npm-hook.
npm script hooks
Способ использования очень прост, в проектеpackage.jsonсерединаscriptsприсоединение к полю"hook": "script"Пара ключ-значение подойдет. Имя хука предоставляется npm, а скрипт — это оператор оболочки, который можно запустить. Вот несколько часто используемых хуков:
- предустановить: в
npm installвыполнить до - установить, постустановить: в
npm installвыполнить после - предстарт: в
npm startвыполнить до - начало, постстарт: в
npm startвыполнить после - etc.
Как вы можете видеть из приведенного выше примера, хуки называются какpre[op]За крючок перед операцией,[op]илиpost[op]Крюк после операции. Есть много других крючков, вы можете обратиться кофициальная документация скрипта npm.
По историческим причинам хуки, связанные с публикацией, будут особенными.Конкретные причины и измененный внешний вид указаны в документе, поэтому я не буду их подробно представлять.
e.g.
например проектnpm installПрежде чем полагаться на глобальный пакет npm, пользователям необходимо сначалаnpm install -g package, то операцию можно записать вpreinstallвнутри:
package.json
...
"scripts": {
"preinstall": "npm install -g package"
...
},
Конечно, часть оболочки может писать все исполняемые операторы оболочки. Если вам нужно больше операций, вы также можете написать сценарий оболочки, а затем выполнить его. Для многих интерфейсов сложно напрямую открывать сценарии оболочки.Вы также можете написать такие сценарии, как node и python, а затем использоватьnode script.jsСпособ выполнения тоже в порядке.
git hooks — отслеживать операции git
представлять
Перехватчики Git в основном аналогичны перехватчикам сценариев npm, описанным выше, и они также настроены соответствующим образом.pre-[op],post-[op]например крючки.
git через корневой каталог проекта.gitДолжно быть хорошо известно, что содержимое каталога используется для маркировки репозитория git и записи соответствующей информации.
Конфигурация git hooks находится в.git/hooksВ каталоге он существует в виде файла скрипта без суффикса, имя файла - это имя хука, а содержимое файла - сценарий оболочки. Вы можете добавить исполняемый контент самостоятельно.Обычно простоnpm initВ папке hooks полно[hook].sampleОбразец файла необходимо скопировать и переименовать в имя хука, прежде чем его можно будет использовать в обычном режиме..
Доступные хуки также различаются в зависимости от версии git.Вот пример хука, связанного с коммитом:
- pre-commit: запустить перед фиксацией
- post-commit: запустить после фиксации
- prepare-commit-msg: перед запуском редактора сообщений фиксации (
git commit -sчто), запустите после создания сообщения по умолчанию - commit-msg: запускается, когда генерируется базовое сообщение-сообщение о фиксации, которое можно использовать для проверки статуса проекта или информации о фиксации до того, как фиксация будет передана.
Существует также множество хуков, основанных на других операциях, которые отличаются друг от друга из-за разных рабочих процессов.Git перехватывает официальную документацию.
**Скрипт ловушки может получать различные параметры и изменять их в зависимости от стоимости. **Напримерcommit-msgХук, хук получает параметр, который представляет собой путь к временному файлу, в котором хранится информация о текущей отправке.Параметр может быть указан в скрипте оболочки как$1Вызывается в форме, с помощью которой мы можем изменить информацию о представлении в файле.
Например, если вы хотите проверить, стандартизирован ли код перед каждым коммитом, вы можете напрямуюpre-commitСкрипт добавлен в концеnpm run lint(Здесь смотрите их конфигурацию, не обязательно предложение).
Тем не менее, идея дизайна git hooks заключается в предоставлении различных решений для настройки на каждой стороне терминала и сервера. Говоря о людях, это потому, что git — это распределенная система, которая гарантирует, что версия всех терминалов одинакова, но конфигурация хуков на стороне сервера и приватного терминала может отличаться, поэтому конфигурация хуков не может следовать за git. подчинение.
НапримерgerritПредоставляется для изменения сообщения фиксацииcommit-msgКрюк должен быть вgit cloneПри этом загружать с удаленного сервера на локальный для замены, код такой:
git clone ssh://kinice@gerrit.company.com:29418/All-Projects && scp -p -P 29418 kinice@gerrit.company.com:hooks/commit-msg All-Projects/.git/hooks/
Это, безусловно, хороший способ. Но бывает ситуация, когда у нас нет других сторонних серверов, на которых можно хранить скрипты, а мы хотим синхронизировать хуки на все терминалы, что нам делать?
Более простым способом использовать Git крючки
Чтобы решить вышеуказанные проблемы, многие великие боги написали сторонние инструменты для синхронизации хуков. Для внешнего интерфейса существует множество сторонних инструментов, которые можно установить на npm, напримерhusky,yorky,git-hooksЖдать.yorkieЭто автор Vue Yuxi You forkhuskyИ сделал некоторые модифицированные инструменты для улучшения опыта, поэтому здесь мы представляемyorkie.
*Примечание:git-hooksИдеи первых двух инструментов отличаются, если вам интересно, вы можете узнать о них:git-hooks.
Установитьyorkie
$ npm install yorkie --save-dev
// package.json
{
"gitHooks": {
"pre-commit": "npm test",
"commit-msg": "npm test",
"...": "..."
}
}
Это так же просто, как прочитать конфигурацию, чтобы понять ее, прямо вpackage.jsonувеличить вgitHooksЭтот элемент и непосредственно напишите в нем оператор оболочки, который вы хотите выполнить.
проводить исследованияyorkieПринцип реализации
После установки yorkie сравните файлы хуков перед установкой, и вы обнаружите, что yorkie напрямую перезаписывает все хуки. Итак, мы положили/.git/hooks/pre-commitОсновной код опубликован, чтобы увидеть, что делает yorkie:
has_hook_script () {
[ -f package.json ] && cat package.json | grep -q "\"$1\"[[:space:]]*:"
}
cd "."
# Check if pre-commit is defined, skip if not
has_hook_script pre-commit || exit 0
# Add common path where Node can be found
# Brew standard installation path /usr/local/bin
# Node standard installation path /usr/local
export PATH="$PATH:/usr/local/bin:/usr/local"
# Export Git hook params
export GIT_PARAMS="$*"
# Run hook
node "./node_modules/yorkie/src/runner.js" pre-commit || {
echo
echo "pre-commit hook failed (add --no-verify to bypass)"
exit 1
}
Игнорируйте приведенный выше код, который проверяет наличие скрипта ловушки и, наконец, выполняетnode ./node_modules/yorkie/src/runner.js:
const fs = require('fs')
const path = require('path')
const execa = require('execa')
const cwd = process.cwd()
const pkg = fs.readFileSync(path.join(cwd, 'package.json'))
const hooks = JSON.parse(pkg).gitHooks // 将package.json重的hooks字段取出来
if (!hooks) { // 没有hook则退出
process.exit(0)
}
const hook = process.argv[2] // 这里的process.argv[2]就是在hooks脚本里传过来的hook名称，如pre-commit
const command = hooks[hook]
if (!command) { // 不是当前hook则退出
process.exit(0)
}
console.log(` > running ${hook} hook: ${command}`)
try {
execa.shellSync(command, { stdio: 'inherit' }) // 使用execa.shellSync运行命令
} catch (e) {
process.exit(1)
}
О пареrunner.jsАнализ, я написал комментарий, вы должны понять это. Прохождениеnpm installПри переписывании хуков --> измените хуки для запуска собственного бегуна --> зависимости бегунаpackage.json), информация об хуках сохраняется в package.json и может быть передана всем участникам проекта через git.
END
Как говорится, лень является движущей силой человеческого прогресса, и я надеюсь, что эти вещи можно использовать для выполнения всех ручных повторяющихся задач одним щелчком мыши, повышения эффективности нашей работы и траты времени на более значимые вещи.