TypeScript 컴파일에서 브라우저 반영까지 자동으로하고 싶습니다.
목적
TypeScrip은 그대로 실행할 수 없으므로 컴파일하고 JavaScript로 변환해야 한다.
또 로컬 서버로 개발하고 있는 경우, 컴파일될 때마다 브라우저의 갱신도 걸리지 않으면 안된다.
귀찮아! ! --->자동화하고 싶다! ! !
환경
환경
windows10
node.js v12.13.0
npm v6.12.0
typescript v3.9.5
이번은 node.js를 사용해 TypeScrip가 인스톨 되고 있는 상태를 전제로 한다.
환경 구축에는 이쪽도 참고로.
· TypeScript 설치부터 실행까지
초기 폴더 구성은 이런 느낌.
TS_Project
├─ node_modules
├─ app.ts
├─ index.html
├─ package-lock.json
└─ package.json
컴파일 자동화
TS 파일에 변경이 있을 경우 자동으로 컴파일되도록 한다.
먼저 TypeScript(이하 TS) 프로젝트 초기화package.json 존재하는 디렉토리에서 다음 명령 실행
명령 프롬프트npx tsc --init
tsconfig.json가 추가되었는지 확인.
여기에는 TS 파일이 어떻게 컴파일되는지 등을 제어하는 설정이 기재되어 있다.
TS_Project
├─ node_modules
├─ app.ts
├─ index.html
├─ package-lock.json
├─ package.json
└─ tsconfig.json <- 追加
후에는 간단합니다.
명령 프롬프트npx tsc --watch
그냥 실행. 이것으로 TS 프로젝트 내의 TS 파일에 변경이 일어났을 경우, 자동으로 컴파일해 주는 감시하가 된다.--watch 는 -w 하지만 가능합니다.
컴파일까지는 자동으로 할 수 있었다.
브라우저 업데이트 자동화
다음에 로컬 서버를 세우고 있는 경우에, 파일을 갱신하면 자동적으로 브라우저를 갱신하도록 하고 싶다.
그래서 "Lite-Server"를 설치한다.
명령 프롬프트npm install --save-dev lite-server
package.json 에 추가되었는지 확인합니다.
"devDependencies": {
"lite-server": "^2.5.4"
}
"Lite-Server"를 설치한 후 package.json 속성의 "scripts" 아래에 다음을 설정합니다.
"scripts": {
"start": "lite-server" <- 追加
}
설정 후에는 명령 프롬프트에 npm start를 입력하여 서버가 서 있습니다.
물론 파일의 갱신이 있을 때는 자동으로 브라우저를 갱신해 준다.
실제 움직임
npx tsc -w 와 npm start 에서 항상 감시 상태로 둡니다.
html과 ts를 준비한다.
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./app.js" defer></script> <!-- 追加！！ -->
<title>初めてのTypeScript</title>
</head>
<body>
</body>
</html>
app.tsconsole.log('Hello TypeScript')
app.ts 파일을 편집하면 자동으로 컴파일->브라우저 갱신까지를 해 주고 있다.
Live Server를 사용할 수 있습니다.
이번은 브라우저의 자동 갱신에 「Lite-Server」를 사용했지만, 「Visual Studio Code」를 사용한 개발을 하고 있다면 Live Server 를 사용하는 것이 편리할지도 모른다. VSCode의 표준 확장 기능이므로.
글쎄 그것은 또 다른 이야기에서.
Reference
이 문제에 관하여(TypeScript 컴파일에서 브라우저 반영까지 자동으로하고 싶습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/eiji-noguchi/items/39df7704d0951d4155f3
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
환경
windows10
node.js v12.13.0
npm v6.12.0
typescript v3.9.5
이번은 node.js를 사용해 TypeScrip가 인스톨 되고 있는 상태를 전제로 한다.
환경 구축에는 이쪽도 참고로.
· TypeScript 설치부터 실행까지
초기 폴더 구성은 이런 느낌.
TS_Project
├─ node_modules
├─ app.ts
├─ index.html
├─ package-lock.json
└─ package.json
컴파일 자동화
TS 파일에 변경이 있을 경우 자동으로 컴파일되도록 한다.
먼저 TypeScript(이하 TS) 프로젝트 초기화package.json 존재하는 디렉토리에서 다음 명령 실행
명령 프롬프트npx tsc --init
tsconfig.json가 추가되었는지 확인.
여기에는 TS 파일이 어떻게 컴파일되는지 등을 제어하는 설정이 기재되어 있다.
TS_Project
├─ node_modules
├─ app.ts
├─ index.html
├─ package-lock.json
├─ package.json
└─ tsconfig.json <- 追加
후에는 간단합니다.
명령 프롬프트npx tsc --watch
그냥 실행. 이것으로 TS 프로젝트 내의 TS 파일에 변경이 일어났을 경우, 자동으로 컴파일해 주는 감시하가 된다.--watch 는 -w 하지만 가능합니다.
컴파일까지는 자동으로 할 수 있었다.
브라우저 업데이트 자동화
다음에 로컬 서버를 세우고 있는 경우에, 파일을 갱신하면 자동적으로 브라우저를 갱신하도록 하고 싶다.
그래서 "Lite-Server"를 설치한다.
명령 프롬프트npm install --save-dev lite-server
package.json 에 추가되었는지 확인합니다.
"devDependencies": {
"lite-server": "^2.5.4"
}
"Lite-Server"를 설치한 후 package.json 속성의 "scripts" 아래에 다음을 설정합니다.
"scripts": {
"start": "lite-server" <- 追加
}
설정 후에는 명령 프롬프트에 npm start를 입력하여 서버가 서 있습니다.
물론 파일의 갱신이 있을 때는 자동으로 브라우저를 갱신해 준다.
실제 움직임
npx tsc -w 와 npm start 에서 항상 감시 상태로 둡니다.
html과 ts를 준비한다.
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./app.js" defer></script> <!-- 追加！！ -->
<title>初めてのTypeScript</title>
</head>
<body>
</body>
</html>
app.tsconsole.log('Hello TypeScript')
app.ts 파일을 편집하면 자동으로 컴파일->브라우저 갱신까지를 해 주고 있다.
Live Server를 사용할 수 있습니다.
이번은 브라우저의 자동 갱신에 「Lite-Server」를 사용했지만, 「Visual Studio Code」를 사용한 개발을 하고 있다면 Live Server 를 사용하는 것이 편리할지도 모른다. VSCode의 표준 확장 기능이므로.
글쎄 그것은 또 다른 이야기에서.
Reference
이 문제에 관하여(TypeScript 컴파일에서 브라우저 반영까지 자동으로하고 싶습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/eiji-noguchi/items/39df7704d0951d4155f3
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
npx tsc --init
TS_Project
├─ node_modules
├─ app.ts
├─ index.html
├─ package-lock.json
├─ package.json
└─ tsconfig.json <- 追加
npx tsc --watch
다음에 로컬 서버를 세우고 있는 경우에, 파일을 갱신하면 자동적으로 브라우저를 갱신하도록 하고 싶다.
그래서 "Lite-Server"를 설치한다.
명령 프롬프트
npm install --save-dev lite-server
package.json 에 추가되었는지 확인합니다. "devDependencies": {
"lite-server": "^2.5.4"
}
"Lite-Server"를 설치한 후
package.json 속성의 "scripts" 아래에 다음을 설정합니다. "scripts": {
"start": "lite-server" <- 追加
}
설정 후에는 명령 프롬프트에
npm start를 입력하여 서버가 서 있습니다.물론 파일의 갱신이 있을 때는 자동으로 브라우저를 갱신해 준다.
실제 움직임
npx tsc -w 와 npm start 에서 항상 감시 상태로 둡니다.
html과 ts를 준비한다.
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./app.js" defer></script> <!-- 追加！！ -->
<title>初めてのTypeScript</title>
</head>
<body>
</body>
</html>
app.tsconsole.log('Hello TypeScript')
app.ts 파일을 편집하면 자동으로 컴파일->브라우저 갱신까지를 해 주고 있다.
Live Server를 사용할 수 있습니다.
이번은 브라우저의 자동 갱신에 「Lite-Server」를 사용했지만, 「Visual Studio Code」를 사용한 개발을 하고 있다면 Live Server 를 사용하는 것이 편리할지도 모른다. VSCode의 표준 확장 기능이므로.
글쎄 그것은 또 다른 이야기에서.
Reference
이 문제에 관하여(TypeScript 컴파일에서 브라우저 반영까지 자동으로하고 싶습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/eiji-noguchi/items/39df7704d0951d4155f3
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./app.js" defer></script> <!-- 追加！！ -->
<title>初めてのTypeScript</title>
</head>
<body>
</body>
</html>
console.log('Hello TypeScript')
이번은 브라우저의 자동 갱신에 「Lite-Server」를 사용했지만, 「Visual Studio Code」를 사용한 개발을 하고 있다면 Live Server 를 사용하는 것이 편리할지도 모른다. VSCode의 표준 확장 기능이므로.
글쎄 그것은 또 다른 이야기에서.
Reference
이 문제에 관하여(TypeScript 컴파일에서 브라우저 반영까지 자동으로하고 싶습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/eiji-noguchi/items/39df7704d0951d4155f3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
