pakcage version
package.json에 version 정보가 있다 이를 활용하는 방법을 살펴보자.
작성자: ospace114@empal.com, http://ospace.tistory.com/
일단 값을 가져오는 방식은 간단하다. 단순 json 파일을 로딩하고 필요로 하는 속성을 추출하면 된다.
import { version } from '../../package';vue.js에서 version을 사용하기 위해 computed을 추가했다.
computed: {
version() {
return version;
},
}내부적으로 버전을 처리하는 방법도 있지만, 현재 배포된 버전을 확인할 수 있도록 화면에 출력해보자.
<div style="color:lightgray; position:absolute; right: 10px; bottom: 5px;">v {{ version }}</div>위의 방식은 오른쪽 하단에 같은 자리에 출력하도록 했다.
npm 스크립트에서 버전 정보를 가져오고 싶다면
const version = process.env.npm_pakcage_version;build time
빌드시간은 index.html에 추가해야 한다.
아래 정보는 빌드시 시간을 고정된 값이 저장되도록 한다.
<html lang="en" data-build-timestamp="<%= Date.now() %>">이를 표시하는 곳에서 형식을 변환해서 출력하면 된다.
computed: {
buildtime() {
let d = new Date(Number(document.documentElement.dataset.buildTimestamp));
d.setMinutes(d.getMinutes() - d.getTimezoneOffset());
return d.toISOString().substr(0, 19);
},
},출력은 앞의 version과 동일하다.
<div style="color:lightgray; position:absolute; right: 10px; bottom: 5px;"> {{ buildtime }}</div>결론
버전 정보와 빌드 시간 출력은 소스코드 관리와 커뮤니케이션을 위한 부가 정보 성격으로 어떻게 활용하는 가는 각자 환경에 따라 다르다. 잘 사용하면 관리에 좋은 도구이지만, 잘못 사용하면 짜증나는 부가작업니다.
반응형
'3.구현 > HTML5&Javascript' 카테고리의 다른 글
| [node.js] 단위테스트 사용하기 (0) | 2021.11.15 |
|---|---|
| [node.js] websocket 사용하기 (0) | 2021.11.15 |
| [vue2] vuetify 기본 구성 (0) | 2021.11.11 |
| [vue2] 목록에서 체크박스 선택 처리 (0) | 2021.11.10 |
| [vue2] vuetify 팝업 모달창 사용 (0) | 2021.11.09 |
