여러 패키지를 사용하고 소수의 모듈을 포함하는 각도 응용 프로그램에서 작업하는 동안 새 패키지가 추가되거나 특정 모듈이 크게 변경될 때마다 팀의 모든 사람이 중복 사용을 위해 코드를 디버깅하기 위해 소스 맵을 개별적으로 수동으로 생성했습니다. 라이브러리, 크기가 큰 모듈 등

내 워크플로우

따라서 이러한 문제를 해결하기 위해 내 작업 흐름은 모듈 및 구성 요소 내부의 모든 코드 원본뿐만 아니라 소스를 분석 및 디버그하기 위해 푸시할 때마다 Angular 애플리케이션의 소스 맵을 생성합니다. 또한 다음과 같은 빌드 명령의 출력을 포함하는 상태 파일을 생성합니다. 빌드 생성에 소요된 크기 및 시간과 함께 생성된 파일.

소스 맵 파일이 생성되면 생성된 파일을 각 수신자의 이메일 주소로 이메일로 보냅니다.

제출 카테고리:

내 제출물은 아래에 해당합니다.

메인테이너 머스트해브

엉뚱한 와일드카드

Yaml 파일

name: Generate & email source maps for Angular app        
on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [12.x]

    steps:
      - uses: actions/checkout@v1
      - name: Cache node modules       # Caching node modules to speedup workflows
        uses: actions/cache@v1
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - name: Node ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}

      - name: npm ci # Clean install of dependencies from package.json & generating build of angular app, storing output in text file
        run: |
          npm ci
          npm run build > "${GITHUB_SHA}-status.txt"
      - name: install source map & generate source maps output  # Installing source-map-explorer & generating output of source map in html,json & tsv with commit SHA as filename
        run: |
          npm i -g source-map-explorer
          source-map-explorer dist/*.js --html "${GITHUB_SHA}.html"   
          source-map-explorer dist/*.js --json "${GITHUB_SHA}.json"
          source-map-explorer dist/*.js --tsv "${GITHUB_SHA}.tsv"
      - name: Send report email # Using action to send email of Build result & source map files to team members, collaborators & contributors
        uses: dawidd6/action-send-mail@v2
        with:
          server_address: smtp.gmail.com
          server_port: 465
          username: ${{secrets.EMAIL}}
          password: ${{secrets.PWD}}
          subject: Source map & build report
          body: <h1> Build results & source map of <b>${{github.repository}}</b> for commit id <b>${{github.sha}}</b></h1>
          to: ${{secrets.RECIPIENTS}}
          from: ${{secrets.EMAIL}}
          content_type: text/html
          attachments: ${{github.sha}}.html,${{github.sha}}.json,${{github.sha}}.tsv,${{github.sha}}-status.txt

워크플로는 주로 다음 단계를 포함합니다.

처음에 워크플로는 cache 및 node setup 작업을 사용하여 노드 환경을 설정하고 응용 프로그램에 대한 종속성을 설치한 다음 빌드 명령을 실행하고 명령의 실행 결과를 텍스트 파일에 저장합니다.

그런 다음 source-map-explorer을 사용하여 소스 맵을 생성하는 명령을 실행하고 파일 이름으로 커밋 ID SHA가 있는 json, html 및 tsv 파일에 결과를 저장합니다.

마지막으로 send email 작업이 소스 맵 파일과 함께 빌드 상태 파일이 포함된 이메일을 구성된 수신자에게 보냅니다

.

예제 코드가 포함된 Github 리포지토리

deveshchatuphale7 / 소스 맵 작업

액션테스트

이 리포지토리에는 소스 맵 생성 작업 워크플로 파일 actions.yml이 있는 샘플 Angular 10 애플리케이션이 포함되어 있습니다.
브랜치 마스터의 각 커밋에서 워크플로는 각도 응용 프로그램에 대한 빌드를 생성하고 빌드 파일이 성공적으로 생성되면 워크플로는 빌드 생성에 소요된 시간과 함께 생성된 각 파일의 이름 및 크기 세부 정보를 포함하는 빌드 상태 파일을 생성합니다. 이와 함께 커밋 SHA를 파일 이름으로 사용하여 json, html 및 tsv 형식으로 빌드 파일의 소스 맵을 생성합니다.
마지막으로 워크플로는 생성된 소스 맵 파일의 이메일을 개발자, 공동 작업자 등의 구성된 이메일 주소로 보냅니다.


View on GitHub


감사합니다!