전단 자동화 워 크 플 로 의 hooks

전단 의 일상적인 작업 에서 '한 가지 작업 을 수행 하기 전에 (그 후에) 다른 작업 을 동시에 수행 해 야 한다' 는 경우 가 자주 발생 합 니 다. 예 를 들 어 우 리 는 git commt 전에 eslint 코드 검사, npm install 전에 프로젝트 의존 도 를 검사 하고 싶 습 니 다.전형 적 인 상황 에서 각종 도 구 는 특정한 동작 이 발생 할 때 사용자 정의 스 크 립 트 를 촉발 할 수 있 습 니 다. 이 기능 을 갈고리 hooks 라 고 합 니 다.
일상 에서 자주 사용 하 는 도 구 는 npm, git, webpack 가 있 는데 그 중의 hooks 용법 을 우리 가 각각 소개 한다.
그 중에서 webpack 의 hooks 는 webpack 개발 자 에 게 제공 하 는 런 타임 이벤트 갈고리 입 니 다. 우 리 는 이 를 이용 하여 작성 할 수 있 습 니 다 plugins. 이것 은 여기 서 말 하지 않 겠 습 니 다. 앞으로 plugin 에 관 한 글 을 단독으로 쓸 것 입 니 다.
npm hooks - npm 작업 감청/구독 npm 원본 수정 알림 받 기
현재 npm hooks 를 언급 하면 두 가지 서로 다른 개념의 조작 이 있다.
일반적인 의미 에서 npm 의 각종 조작 을 감청 하 는 갈 고 리 는 설정 package.json 파일 의 scripts 필드 를 통 해 이 루어 집 니 다.npm hooks 는 npm 가 제공 하 는 명령 행 작업 으로 필요 한 npm package 에서 발생 하 는 특정한 변경 사항 을 구독 하기 위해 서 입 니 다. 예 를 들 어 특히 큰 (오류) 의 새로운 동 태 를 구독 할 수 있 습 니 다.물론 이 기능 은 도 메 인 이름 을 제공 하고 npm 계 정 이 있 고 서 비 스 를 구 매 해 야 하기 때문에 9582 ℃ (9583 ℃, 9584 ℃) 에 대해 서 는 논의 하지 않 았 습 니 다. 구체 적 으로 npm - hook 공식 문 서 를 참조 하 십시오.
npm script hooks
사용 방법 은 간단 합 니 다. 프로젝트 package.json 의 scripts 필드 에 "hook": "script" 키 를 추가 하면 됩 니 다.hook 이름 은 npm 에서 제공 합 니 다. script 은 실행 가능 한 셸 문 입 니 다.다음 에 자주 사용 하 는 훅 몇 개 를 열거 합 니 다.

preinstall: npm install 이전에 실행

install, post install: npm install 이후 실행

prestart: npm start 전에 실행

start, potstart: npm start 이후 실행

etc.

이상 의 예 에서 알 수 있 듯 이 hooks 의 이름 은 pre[op] 조작 전의 갈고리 이 고 [op] 또는 post[op] 조작 후의 갈고리 이다.다른 갈고리 도 많 습 니 다. 구체 적 으로 npm script 공식 문 서 를 찾 아 볼 수 있 습 니 다.
역사적 인 원인 으로 인해 Publish 와 관련 된 갈 고 리 는 비교적 특수 할 것 입 니 다. 구체 적 인 원인 과 수 정 된 모습 은 모두 문서 에 있 고 소개 가 많 지 않 습 니 다.
e.g.
예 를 들 어 프로젝트 npm install 이전에 전체 npm 패키지 에 의존 하기 때문에 사용 자 는 먼저 npm install -g package 해 야 한다. 이때 이 조작 을 preinstall 에 쓸 수 있다.
package.json

...
"scripts": {
  "preinstall": "npm install -g package"
  ...
},

물론 셸 의 부분 은 실행 가능 한 셸 문 구 를 모두 쓸 수 있 습 니 다.필요 한 동작 이 많 으 면 셸 스 크 립 트 를 쓰 고 이 스 크 립 트 를 실행 할 수도 있 습 니 다.많은 전단 에서 셸 스 크 립 트 를 직접 만 드 는 것 은 어렵 고 node, python 등 스 크 립 트 를 쓸 수도 있 으 며 node script.js 방식 으로 실행 하 는 것 도 ok 입 니 다.
git hooks -- git 작업 감청
소개 하 다.
git hooks 는 기본적으로 위 에서 소개 한 npm script hooks 와 차이 가 많 지 않 고 해당 하 는 pre-[op], post-[op] 와 같은 갈 고 리 를 설정 합 니 다.
git 는 프로젝트 루트 디 렉 터 리 아래 .git 디 렉 터 리 의 내용 을 통 해 git 라 이브 러 리 를 표시 하고 관련 정 보 를 기록 하 는 것 은 잘 알려 져 있 을 것 입 니 다.
git hooks 의 설정 은 .git/hooks 디 렉 터 리 에 있 습 니 다. 접미사 가 없 는 스 크 립 트 파일 형식 으로 존재 합 니 다. 파일 이름 은 갈고리 이름 이 고 파일 내용 은 셸 스 크 립 트 입 니 다. 실행 가능 한 내용 을 스스로 추가 할 수 있 습 니 다.일반적으로 강 npm init 의 hooks 폴 더 에는 모두 [hook].sample 예제 파일 이 있 으 며, 이 hook 이름 으로 복사 하고 이름 을 바 꿔 야 정상적으로 사용 할 수 있 습 니 다.
git 버 전에 따라 사용 가능 한 hooks 도 다 릅 니 다. commt 와 관련 된 hook 예 를 들 어 보 겠 습 니 다.

pre - commit: commt 전에 실행

post - commit: commt 이후 실행

prepare - commt - msg: 제출 정보 편집 기 를 시작 하기 전에 git commit -s 기본 정보 가 생 성 된 후에 실 행 됩 니 다

commt - msg: 기본 commt - msg 를 생 성 할 때 터치 합 니 다. 제출 전 프로젝트 상 태 를 검증 하거나 정 보 를 제출 할 수 있 습 니 다

다른 조작 을 바탕 으로 하 는 갈고리 도 많 습 니 다. 모두 작업 절차 에 따라 다 르 기 때문에 구체 적 으로 Git 갈고리 공식 문 서 를 찾 아 볼 수 있 습 니 다.
갈고리 스 크 립 트 는 지적 에 따라 서로 다른 인 자 를 받 고 수정 할 수 있 습 니 다.예 를 들 어 commit-msg 갈고리, 갈 고 리 는 하나의 인 자 를 받 습 니 다. 현재 제출 한 정 보 를 저장 하 는 임시 파일 의 경로 입 니 다. 인 자 는 셸 스 크 립 트 에서 $1 형식 으로 호출 할 수 있 습 니 다. 이것 이 있 으 면 저 희 는 파일 에 제출 한 정 보 를 수정 할 수 있 습 니 다.
예 를 들 어 매번 commt 전에 코드 규범 여 부 를 검사 하려 면 pre-commit 스 크 립 트 마지막 에 npm run lint 를 추가 할 수 있 습 니 다.
그러나 git hooks 의 디자인 방향 은 모든 단말기 와 서버 에서 서로 다른 맞 춤 형 방안 을 제공 하 는 것 이다.말하자면 git 는 분포 식 시스템 이기 때문에 모든 터미널 의 버 전이 같 을 수 있 지만 hooks 는 서버 쪽 과 개인 터미널 의 설정 이 다 를 수 있 기 때문에 hooks 의 설정 은 git 에 따라 제출 할 수 없습니다.
예 를 들 어 gerrit 에서 제공 하 는 commt message 수정 commit-msg 갈 고 리 는 git clone 과 동시에 원 격 서버 에서 로 컬 로 다운로드 하여 교체 해 야 합 니 다. 코드 는 다음 과 같 습 니 다.

git clone ssh://[email protected]:29418/All-Projects && scp -p -P 29418 [email protected]:hooks/commit-msg All-Projects/.git/hooks/

이것 은 당연히 좋 은 방법 이다.그러나 스 크 립 트 를 저장 할 수 있 는 제3자 서버 가 없 을 때 hooks 를 모든 터미널 에 동기 화하 기 를 원 하 는 경우 가 있 습 니 다. 어떻게 해 야 합 니까?
더 쉬 운 방법 으로 git hooks 를 사용 합 니 다.
위의 문 제 를 해결 하기 위해 많은 대신 들 이 제3자 도 구 를 써 서 hooks 동기 화 를 실현 했다.전단 에 있어 npm 에 설치 할 수 있 는 제3자 도 구 는 매우 많다. 예 를 들 어 husky, yorky, git-hooks 등 이다.yorkie 은 Vue 작가 유 우 계 fork husky 이 고 수정 도 구 를 만들어 사용 체험 을 개선 했다. 여기 서 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 를 설치 한 후 설치 전의 hook 파일 을 비교 해 보면 yorkie 가 모든 hooks 를 직접 다시 쓴 것 을 발견 할 수 있 습 니 다.그래서 우 리 는 /.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 을 통 해 hooks --> hooks 를 자신의 runner --> runner 의존 package.json 으로 바 꾸 는 방식 으로 hooks 정 보 를 package. json 에 저장 하고 git 를 통 해 모든 프로젝트 구성원 에 게 공유 할 수 있 습 니 다.
END
게 으 름 은 인류 발전의 동력 이 라 고 하 는데 이런 것들 로 모든 수공 중복 임 무 를 원 키 로 완성 하고 우리 의 업무 효율 을 향상 시 키 며 시간 을 더욱 의미 있 는 일 에 쓰 기 를 바란다.