p1

自動化 Release 工作坊
鄭棋文 Steven

p2

# Node v18.17 或者 v20.6.1 以上
node -v
# git v2.y.z 以上
git -v

p3

新增 github repository
請參考課程簡報
⏰:2分鐘

p4

執行 git clone

git clone https://github.com/your-account-name/your-repo-name.git
# 進入剛剛 clone 的資料夾
cd your-repo-name
# 建立README.md
echo "# your-repo-name" >> README.md
# README加入 git
git add README.md
git commit -m "first commit"
git push -u origin main
# 確認可以commit,並且push

⏰:2分鐘

p5

Npm init

npm init
 
package name: (automation-release) your-package-name
version: (1.0.0) 0.0.0 # 版本請輸入 0.0.0
description: demo
entry point: (index.js)
test command: jest  # test command 請輸入 jest
git repository: https://github.com/your-account-name/your-repo.git
# git repository 請輸入剛剛Git Clone的網址，務必要正確。
keywords:
author: Steven
license: (ISC)

p6

git add package.json
 
git commit -m "completed npm init"
 
git push
# 請確認Push有成功

⏰:2分鐘

p7
安裝：🐶 Husky

# 安裝 husky🐶
npx husky-init && npm install
 
# 將所有異動加入git stage
git add .
 
git commit -m "add husky"
 
# 看一下結果

⏰:2分鐘

p8
1. 開啟 .husky/pre-commit
1. 將 npm test 刪除

# 再次 commit
git commit -m "add husky"

p9
新增：Commit-msg

# 新增commit-msg
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'
 
# 將所有異動加入git
git add .
 
git commit -m "add commit-msg"
# 看一下結果

⏰:2分鐘

p10

安裝：Commitlint
# 安裝 commit-lint
npm install --save-dev @commitlint/config-conventional @commitlint/cli
 
# 新增檔案: commitlint.config.js
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
 
# 將所有異動加入git
git add .
 
git commit -m "add commitlint.config.js"
# 看一下結果

⏰: 2分鐘

p11
Why？

p12
修改 commit message

# 修改commit 按照 conventional-commit 進行撰寫
git commit -m "feat: add husky and commitlint"
 
git push
# 確認push 是否成功？

p13
VSCode Extension
Conventional commit

Jetbrain Plugins
Git commit Template
Conventional commit

p14
產生changelog

# 安裝：semantic-release
npm install --save-dev semantic-release
# 安裝：plugin
npm install --save-dev @semantic-release/git @semantic-release/changelog

補充資料 [plugin](https://semantic-release.gitbook.io/semantic-release/extending/plugins-list)

p15
在Repo根目錄新增 release.config.js

//release.config.js
module.exports = {
    // 在什麼分支下，要執行 semantic-release
    branches: ['main'],
    plugins: [
      '@semantic-release/commit-analyzer',//分析你的 commit message,有沒有 feat or fix
      '@semantic-release/release-notes-generator',
      ['@semantic-release/npm',{npmPublish: false}],
      [
        '@semantic-release/changelog', //產生CHANGELOG
        {
          mangle: false,
          headerIds: false,
          changelogFile: 'CHANGELOG.md', //設定檔案名稱
        },
      ],
      [
        '@semantic-release/git', // 新增CHANGELOG.md後，進行commit
        {
          assets: ['CHANGELOG.md', 'package.json'], // commit 要加入的檔案
          message:
            'chore(release): ${nextRelease.version} [skip ci]', //commit 時的 message
        },
      ],
        
    ],
  };

# 將有異動的檔案加入git
git add .
git commit -m "chore: add release.config.js"

⏰:2分鐘

p16
產生CHANGELOG.md

npx semantic-release

p17
加上 --ci=false

npx semantic-release --ci=false

p18

git log --oneline

git add . 
git commit -m "chore: update package-lock.json version"
git push

p19
建立Github Release
在Repo根目錄新增：.github/workflows/release.yaml

# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
 
name: Release workflow
 
on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]
permissions:
  contents: read # for checkout
 
jobs:
  build:
    runs-on: ubuntu-latest
    permissions:
      contents: write # to be able to publish a GitHub release
      issues: write # to be able to comment on released issues
      pull-requests: write # to be able to comment on released pull requests
      id-token: write # to enable use of OIDC for npm provenance
    strategy:
      matrix:
        node-version: [18.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
    steps:
    - uses: actions/checkout@v3
      with:
        fetch-depth: 0
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - run: npm install
      env:
        HUSKY: 0
    - run: npx semantic-release
      env:
        GH_TOKEN: ${{ secrets.GH_TOKEN }}
      name: Release

p20

# 將所有異動加入git
git add .
git commit -m "ci: add github workflow release.yaml"
git push
 
# 看一下 Github Action
# 確認 Action 有被觸發

p21
修改release.config.js

//release.config.js
module.exports = {
    branches: ['main'],
    plugins: [
      '@semantic-release/commit-analyzer',
      '@semantic-release/release-notes-generator',
      ['@semantic-release/npm',{npmPublish: false}],
      [
        '@semantic-release/changelog',
        {
          mangle: false,
          headerIds: false,
          changelogFile: 'CHANGELOG.md',
        },
      ],
      [
        '@semantic-release/git',
        {
          assets: ['CHANGELOG.md', 'package.json'],
          message:
            'chore(release): ${nextRelease.version} [skip ci]',
        },
      ],
        '@semantic-release/github',
    ],
  };

npx semantic-release

p22

# 將所有異動加入git
git add .
git commit -m "chore: update release.config.js to add github plugin"
git push

# 確認 Action 有被觸發第二次

p23
新增：
GH_TOKEN= Github Personal token
權限：repo 打勾即可
補充：[Github Personal Token 申請方式](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
p24
重跑一次Action
確認GH_TOKEN有正確的讀取
p25
給一個feature commit
假設修改 package.json 的description

# 將異動加入git
git add .
# commit message 的 type 使用 feat
git commit -m "feat: add xxx"
git push

接著,看一下 Action 的結果是啥?🤔
p26
🎉 👏
掌聲鼓勵
p27
🧐Q&A
p28
歡迎聯絡
FB: https://fb.ChiWenCheng.com

LinkedIn: https://cv.ChiWenCheng.com

✉️: [e-mail]

如果本次的Workshop有幫助到你們
歡迎分享😍