VUE3.0을 빠르게 시작하는 방법: 학습 시작
위 그림은 페이지에 표시되는测试环境/开发环境버전 정보를 보여줍니다. [관련 추천 튜토리얼: "Angular Tutorial"]
추후 소개가 있을 예정입니다.
위의 그림은 각 제출물에 대한 Git Commit 정보를 보여줍니다. 물론 여기에는 모든 제출물을 빌드할 때마다 기록할 수 있습니다.
이제 Angular 사용하여 다음 효과를 구현해 보겠습니다. React 와 Vue 에도 동일하게 적용됩니다.
여기서의 초점은 환경을 구축하는 것이 아니기 때문에 angular-cli 스캐폴딩을 사용하여 프로젝트를 직접 생성할 수 있습니다.
1단계: 스캐폴딩 도구 설치
npm install -g @angular/cli
2단계: 프로젝트 만들기
# ng new PROJECT_NAME ng new ng-commit
3단계: 프로젝트 실행
npm run start
프로젝트는 기본적으로 포트 4200 수신합니다. 브라우저에서 http://localhost:4200/ 엽니다.
ng-commit src
ng-commit 프로젝트의 키 폴더4200이 점유되지 않는다는 전제하에
src구성은 다음과 같습니다.
├── app // 애플리케이션 본체 │ ├── app-routing.module.ts // 라우팅 모듈 │ . │ └── app.module.ts // 애플리케이션 모듈 ├── 자산 // 정적 리소스 ├── main.ts // 항목 파일. └── style.less // 전역 style 위의 디렉터리 구조입니다
. app 디렉터리에 services 서비스 디렉터리를 추가하고, assets 디렉터리에 version.json 파일을 추가하겠습니다.
하고 루트 디렉터리에 version.txt 파일을 생성하여 제출된 정보를 저장하며, 제출 정보를 운영하기 위해 루트 디렉터리에 commit.js 파일을 생성합니다.
초점은 commit.js 에 있습니다. 주제로 직접 이동해 보겠습니다.
const execSync = require('child_process').execSync;
const fs = 요구('fs')
const versionPath = 'version.txt'
const buildPath = 'dist'
const autoPush = true;
const commit = execSync('git show -s --format=%H').toString().trim(); // 현재 버전 번호 let versionStr = ''; // 버전 문자열 if(fs.existsSync( versionPath) ) {
versionStr = fs.readFileSync(versionPath).toString() + 'n';
}
if(versionStr.indexOf(commit) != -1) {
console.warn('x1B[33m%sx1b[0m', '온난화: 현재 Git 버전 데이터가 이미 존재합니다!n')
} 또 다른 {
let name = execSync('git show -s --format=%cn').toString().trim(); // 이름 let email = execSync('git show -s --format=%ce').toString ().trim(); // 이메일 let date = new Date(execSync('git show -s --format=%cd').toString()) // 날짜 let message = execSync('git show -s --format=%s').toString().trim(); // 설명 versionStr = `git:${commit}nAuthor:${name}<${email}>nDate:${date .getFullYear ()+'-'+(date.getMonth()+1)+'-'+date.getDate()+' '+date.getHours()+':'+date.getMinutes()}n 설명: ${message}n${new Array(80).join('*')}n${versionStr}`;
fs.writeFileSync(versionPath, versionStr);
// 버전 정보를 작성한 후 자동으로 현재 브랜치의 git에 버전 정보를 제출합니다. if(autoPush) { // 이 단계는 실제 필요에 따라 작성할 수 있습니다. execSync(`git add ${ versionPath }`);
execSync(`git commit ${ versionPath } -m 자동으로 버전 정보 제출`);
execSync(`git 푸시 원본 ${ execSync('git rev-parse --abbrev-ref HEAD').toString().trim() }`)
}
}
if(fs.existsSync(buildPath)) {
fs.writeFileSync(`${ buildPath }/${ versionPath }`, fs.readFileSync(versionPath))
} 위 파일들은 node commit.js 통해 직접 처리할 수 있다. 관리를 용이하게 하기 위해 package.json 에 명령줄을 추가합니다:
"scripts": {
"commit": "노드 commit.js"
} 이런 식으로 npm run commit 사용하면 node commit.js 와 동일한 효과가 있습니다.
위의 준비를 통해 commit 정보를 통해 지정된 형식의 버전 정보 version.json 생성할 수 있습니다.
버전 데이터를 생성하려면 루트 디렉터리에 새 파일 version.js 만듭니다.
const execSync = require('child_process').execSync;
const fs = 요구('fs')
const targetFile = 'src/assets/version.json'; //에 저장된 대상 파일 const commit = execSync('git show -s --format=%h').toString().trim() //Current 제출된 버전 번호, 해시 값의 처음 7자리 let date = new Date(execSync('git show -s --format=%cd').toString()) // Date let message = execSync('git show - s --format=%s').toString().trim() // 설명 let versionObj = {
"커밋": 커밋,
"날짜": 날짜,
"메시지": 메시지
};
const 데이터 = JSON.stringify(versionObj);
fs.writeFile(targetFile, 데이터, (err) => {
if(err) {
실수를 던져
}
console.log('Stringify Json 데이터가 저장되었습니다.')
}) 관리를 용이하게 하기 위해 package.json 에 명령줄을 추가합니다.
"scripts": {
"버전": "노드 버전.js"
} development 환경, production 환경, test 환경이 있다고 가정합니다.
major.minor.patch 입니다. 예: 1.1.0major.minor.patch:beta 입니다. 예: 1.1.0:betamajor.minor.path-data:hash 입니다. major.minor.path-data:hash (예: 1.1.0-2022.01.01:4rtr5rg)다양한
환경 관리를 용이하게 하기 위해 다음과 같이 프로젝트의 루트 디렉터리에 새 파일을 만듭니다.
├── default.json // 프로젝트가 호출하는 구성 파일 ├── development.json // 개발 환경 구성 파일 ├── Production.json // 프로덕션 환경 구성 파일 └── test.json // 테스트 환경 구성 파일
관련 파일 내용은 다음과 같습니다.
// development.json
{
"env": "개발",
"버전": "1.3.0"
} // 생산.json
{
"env": "생산",
"버전": "1.3.0"
} //테스트.json
{
"env": "테스트",
"버전": "1.3.0"
} default.json 명령줄을 기반으로 다양한 환경의 구성 정보를 복사하고 package.json 에서 구성합니다. :
"scripts": {
"copyConfigProduction": "cp ./config/production.json ./config/default.json",
"copyConfigDevelopment": "cp ./config/development.json ./config/default.json",
"copyConfigTest": "cp ./config/test.json ./config/default.json",
} 쉽죠?
생성된 버전 정보 의 내용을 통합하여 환경에 따라 다른 버전 정보를 생성하는 방법은 다음과 같습니다.
const execSync = require('child_process').execSync;
const fs = 요구('fs')
const targetFile = 'src/assets/version.json'; // 저장된 대상 파일 const config = require('./config/default.json');
const commit = execSync('git show -s --format=%h').toString().trim(); //현재 제출된 버전 번호 let date = new Date('git show -s --format =%cd').toString()); // 날짜 let message = execSync('git show -s --format=%s').toString().trim() // 설명 let versionObj = {
"env": 구성.env,
"버전": "",
"커밋": 커밋,
"날짜": 날짜,
"메시지": 메시지
};
//날짜 형식 지정 const formatDay = (date) => {
let formatted_date = date.getFullYear() + "." + (date.getMonth()+1) + "."
형식화된_날짜를 반환합니다.
}
if(config.env === '생산') {
versionObj.version = config.version
}
if(config.env === '개발') {
versionObj.version = `${ config.version }:beta`
}
if(config.env === '테스트') {
versionObj.version = `${ config.version }-${ formatDay(date) }:${ 커밋 }`
}
const 데이터 = JSON.stringify(versionObj);
fs.writeFile(targetFile, 데이터, (err) => {
if(err) {
실수를 던져
}
console.log('Stringify Json 데이터가 저장되었습니다.')
}) package.json 에 다양한 환경에 대한 명령줄을 추가합니다:
"scripts": {
"build:production": "npm 실행 copyConfigProduction && npm 실행 버전",
"build:development": "npm 실행 copyConfigDevelopment && npm 실행 버전",
"build:test": "npm 실행 copyConfigTest && npm 실행 버전",
} 생성된 버전 정보는 assets 에 직접 저장되며, 구체적인 경로는 src/assets/version.json 입니다.
angular 단계는 페이지에 버전 정보를 표시하는 것입니다.
ng generate service version 사용하여 app/services 디렉터리에 version 서비스를 생성하세요. 생성된 version.service.ts 파일에 다음과 같이 요청 정보를 추가합니다.
import { Injectable } from '@angular/core';
'@angular/common/http'에서 { HttpClient }를 가져옵니다.
'rxjs'에서 { Observable }을 가져옵니다.
@주입 가능({
제공됨: '루트'
})
내보내기 클래스 VersionService {
건설자(
비공개 http: HttpClient
) { }
공개 getVersion():Observable<모든> {
return this.http.get('assets/version.json')
}
} 요청을 사용하기 전에 app.module.ts 파일에 HttpClientModule 모듈을 마운트합니다.
import { HttpClientModule } from '@angular/common/http';
// ...
수입: [
HttpClient모듈
], 그런 다음 구성 요소에서 호출하면 됩니다. app.component.ts 파일은 다음과 같습니다.
import { Component } from '@angular/core';
import { VersionService } from './services/version.service' //버전 서비스 소개 @Component({
선택기: 'app-root',
templateUrl: './app.comComponent.html',
styleUrls: ['./app.comComponent.less']
})
내보내기 클래스 AppComponent {
공개 버전: 문자열 = '1.0.0'
건설자(
개인 읽기 전용 versionService: VersionService
) {}
ngOnInit() {
this.versionService.getVersion().subscribe({
다음: (데이터: 임의) => {
this.version = data.version //버전 정보 변경},
오류: (오류: 모두) => {
console.error(오류)
}
})
}
} 이제 버전 정보가 완성되었습니다. 마지막으로 package.json 명령을 조정해 보겠습니다.
"scripts": {
"start": "서빙",
"version": "노드 버전.js",
"commit": "노드 commit.js",
"build": "ng 빌드",
"build:production": "npm run copyConfigProduction && npm 실행 버전 && npm run build",
"build:development": "npm run copyConfigDevelopment && npm run version && npm run build",
"build:test": "npm run copyConfigTest && npm 실행 버전 && npm run build",
"copyConfigProduction": "cp ./config/production.json ./config/default.json",
"copyConfigDevelopment": "cp ./config/development.json ./config/default.json",
"copyConfigTest": "cp ./config/test.json ./config/default.json"
} scripts 사용하는 목적은 관리를 용이하게 하는 것뿐만 아니라 jenkins 구성 및 호출을 용이하게 하는 것입니다. jenkins 부분은 관심 있는 분들이 직접 시도해 볼 수 있습니다.