Typescript 을 사용 하여 node.js 프로젝트 개발(간단 한 환경 설정)
11583 단어 Typescriptnode
Typescript 개발 의 장점:
4.567917.비교적 엄격 한 유형 검사 와 문법 검사
4.567917.node.js v 6.9.1 또는 임의의 새로운 버 전,오래된 버 전 은 잠시 시험 하지 않 았 습 니 다tsc typescript 컴 파일 러,npm 설치:npm install-g typescript,현재 v 2.0.10편집기:vscode명령 행 터미널:windows 의 cmd특별 알림 과 토 크:tsc 를 설치 하려 면 벽 을 넘 어야 할 수도 있 으 므 로 타 오 바 오 미 러 를 사용 할 수도 있 습 니 다.
node.js 프로젝트 만 들 기
npm init 를 사용 하여 지정 한 디 렉 터 리 에 항목 의 디 렉 터 리 를 만 듭 니 다.
여기 서 나 는 자신의 프로젝트 디 렉 터 리 구 조 를 만 들 었 다.
testTS
|---build // js
|---src //ts
|---static //
| |---scripts
| | |---main.js
| |----styles
| | |---style.css
| |----assets
|---views //html
| |---index.html
|---package.json
|---tsconfig.json위의 디 렉 터 리 구조 에 tsconfig.json 파일 이 있 습 니 다.ts 의 컴 파일 옵션 을 설정 합 니 다.
이 파일 을 가 져 오 려 면 프로젝트 루트 디 렉 터 리 에 tsc--init 를 사용 하면'tsconfig.json'이 자동 으로 만들어 집 니 다.
필요 한 설정 항목 작성
기본적으로 tsc 는 디 렉 터 리 의 모든.ts 파일 을 컴 파일 하 는 기본 컴 파일 설정 을 사용 합 니 다.tsconfig.json 을 작성 하면 tsc 의 컴 파일 행 위 를 설정 하여 원 하 는 결 과 를 얻 을 수 있 습 니 다.
{
"compilerOptions": {
"module": "commonjs", //
"target": "es6", //
"noImplicitAny": false, // 'any' 。
"sourceMap": false, // debug
"rootDir":"./src", // --outDir。
"outDir":"./build", // 。
"watch":true // 。 ， 。
},
"include":[
"./src/**/*"
],
"exclude":[
"views",
"static"
]
}
"copiler Options"는 컴 파일 옵션 입 니 다.자세 한 내용 은 다음 을 참조 하 십시오.
중국어 문서
영문 문서
"module"은 컴 파일 된 js 코드 를 지정 하고 어떤 모듈 규범 을 사용 하 는 지 지정 하 는 데 사 용 됩 니 다.node.js 프로젝트 를 개발 하기 때문에 comonjs 를 선택 하 십시오.(관심 이 있다 면 모든 module 의 가능 한 값 을 한 번 시험 해 볼 수 있 습 니 다.컴 파일 된 js 파일 의 차 이 를 보면 생 성 된 코드 가 괜 찮 고 깨끗 하 다 는 것 을 알 수 있 습 니 다.)
'target'은 컴 파일 된 js 코드 가 어떤 규범 을 따 르 는 지,es3/es5/es6 등 이 있 습 니 다.여 기 는 ts 2.0 코드 와 es6 코드 의 차 이 를 비교 하기 위해'es6'를 사 용 했 습 니 다.
"rootDir"는 컴 파일 러 에 게 이 디 렉 터 리 의 파일 이 컴 파일 되 어야 한 다 는 것 을 알려 줍 니 다.그렇다면 이 옵션 을 설정 하고 외부(예 를 들 어 루트 디 렉 터 리)에'ts 파일'을 설치 하면 어떻게 될까요?tsc 는 이러한 오 류 를 알려 줍 니 다.
"error TS6059: File 'D:/workplace/nodeWP/testTS/index.ts' is not under 'rootDir' 'D:/workplace/nodeWP/testTS/src'. 'rootDir' is expected to contain all source files."
이것 은 분명히 우리 가 원 하 는 결과 가 아니다.
솔 루 션 은 include 와 exclude 속성 을 사용 합 니 다.문서 설명 에 따 르 면"include"와"exclude"속성 은 파일 glob 일치 모드 목록 을 지정 합 니 다.포 함 된 파일 디 렉 터 리 나 파일,필터 가 필요 한 파일 이나 디 렉 터 리 를 표시 합 니 다.자세 한 것 은 공식 문서 의 설명 을 보십시오.
따라서"./src/**/*"를"include"가 가리 키 는 배열 에 추가 하면 지정 할 수 있 습 니 다./src 의 모든 파일 은 우리 가 진정 으로 컴 파일 되 어야 하 며 다른 디 렉 터 리 는 제 외 됩 니 다.
"outDir"는 컴 파일 된 js 코드 가 출력 된 곳 을 가리킨다.문서 에 도"outFile"옵션 이 있 습 니 다.모든 ts 파일 을 일정한 순서 규칙 에 따라 하나의 파일 로 포장 할 수 있 습 니 다.구체 적 으로 문 서 를 참고 할 수 있 습 니 다.여기 서 우 리 는 outDir 를 우선 사용 합 니 다.
시험 해 보다
두 개의 프로필 을 작성 한 후에 코드 를 작성 하고 컴 파일 을 실행 할 수 있 습 니 다.우리 시험 해 보 자.
.../src/server.ts 에 간단 한 것 을 쓰 십시오.
interface ICache{
useCache:boolean;
[propName:string]:any;
}
const cache:ICache = {useCache:true};D:\workplaceodeWP\testTS>tsc
컴 파일 을 통 해 server.js 를 build 디 렉 터 리 에 생 성 합 니 다:
//server.js
const cache = { useCache: true };프로젝트 를 개발 하려 면 이 코드 만 있 는 것 은 분명 하지 않다.내부 모듈 과 제3자 모듈 을 사용 해 야 합 니 다.그러나 모듈 을 직접 가 져 오 면.ts 파일 에 서 는 안 됩 니 다.예 를 들 면:
이것 은 type:script 자체 의 메커니즘 으로 인해 xx.d.ts 성명 파일 이 필요 합 니 다.모듈 이 대외 적 으로 공개 하 는 방법 과 속성의 유형 과 내용 을 설명 합 니 다.좀 귀 찮 은 것 같 아서 요.다행히 정부 와 지역 사 회 는 이 문 제 를 해결 하기 위해 방안 을 마련 했다.
TypeScript 2.0 이상 버 전에 서 형식 성명 파일 을 가 져 오 려 면 npm 만 사용 하 십시오.프로젝트 디 렉 터 리 에서 설치 실행:
npm install --save-dev @types/node
import * as http from 'http';내장 모듈 에 대해@types/node 모듈 을 설치 하면 모듈 의 성명 파일 문 제 를 전체적으로 해결 할 수 있 습 니 다.그렇다면 방대 한 제3자 모듈 에 대해 서 는 어떻게 해 야 할 까?정부 와 지역사회 에서 도 검색 과 설치 경 로 를 제공 했다.
성명 파일 을 해결 한 후에 사실 우 리 는 ts 를 사용 하여 node.js 프로젝트 의 개발 을 간단하게 진행 할 수 있 습 니 다.그러나 코드 를 다 쓰 거나 수정 할 때마다 컴 파일 한 다음 에 시작 하 는 것 은 크 지 않 지만 상당히 짜증 나 는 일이 다.효율 을 위해 서 우 리 는 그것 을 개선 해 야 한다.
우선.ts 파일 이 자동 으로 컴 파일 될 수 있 도록 해 야 합 니 다.이것 은 위의 tsconfig.json 파일 에 설정 되 어 있 습 니 다.바로"watch":true 입 니 다.이 때 명령 행 에서 tsc 명령 을 실행 하면 컴 파일 러 는 디 렉 터 리 의.ts 파일 의 변 화 를 수시로 감시 한 다음 에 자동 으로 컴 파일 합 니 다.
node 서버 를 자동 으로 다시 시작 합 니 다.우 리 는supervisor모듈 로 해결 하거나 유사 한 기능 을 가 진 해결 방안 을 사용 할 수 있 습 니 다.
전역 에 슈퍼 바 이 저 모듈 npm install-g 슈퍼 바 이 저 를 설치 한 후 터미널 에서 슈퍼 바 이 어 를 사용 할 수 있 습 니 다./build/server.js 로 서버 를 시작 하고 서버 쪽 코드 가 바 뀌 면 자동 으로 서버 를 다시 시작 합 니 다.
시작 서 비 스 를 더욱 간단하게 하 다
이상 의 두 명령 으로 시작 할 때 파 라 메 터 를 추가 해 야 할 수도 있 습 니 다.입력 할 때마다 번 거 롭 습 니 다.
npm script 으로 해결 할 수 있 습 니 다.package.json 파일 의"scripts"에서 설정 합 니 다:
{
"scripts":{
"dev": "supervisor -w build ./build/server.js",
"build": "tsc",
}
}npm run build 를 실행 할 때 ts 파일 만 컴 파일 하고 ts 의 변 화 를 감시 합 니 다.
예 를 들 어 시험 해 보 자.
import * as http from 'http';
//====================
const server = http.createServer(function(request:http.IncomingMessage,response:http.ServerResponse):void{
console.log("create a server...");
response.writeHead(200,{'Content-Type':'text/plain'});
response.write('Hello world,we use typescript to develop.');
response.end();
});
server.listen(3000,function(){
console.log("Server listening on port 3000");
console.log("test...");
});
2017.5.3 업데이트:
본문 에 대한 여러분 의 지지 에 감 사 드 립 니 다.친구(@Ajaxyz)가 ts 컴 파일 감시 와 서버 재 부팅 을 명령 으로 통합 할 방법 이 있 습 니까?
여기 서 비교적 간단 한 방법 을 제시 하여 gulp 를 사용 하여 이 두 가지 절 차 를 관리 합 니 다.gulp 작업 을 어떻게 사용 하 는 지 는 Gulp API 를 참고 하 세 요)
1.gulp 의 watch()를 사용 하여 ts 파일 의 변 화 를 감시 하고 서버 를 다시 시작 합 니 다.
이 방식 은 gulp 와 gulp-type escript 플러그 인(설치 하 다.)을 사용 해 야 합 니 다.
주의 할 점 은:gulp-typescript 은 프로젝트 디 렉 터 리 에 typescript 을 설치 해 야 할 수도 있 으 므 로 프로젝트 디 렉 터 리 에서 명령 행 을 실행 할 수 있 습 니 다.
npm install typescript
//gulpfile.js
let gulp = require('gulp');
let ts = require('gulp-typescript');
let tsp = ts.createProject('tsconfig.json'); // tsconfig.json tsc
let exec = require('child_process').exec;
let child;
//
const PATHS = {
scripts:['./src/**/*.ts'],
output:'./build',
};
// ts
gulp.task('build-ts',['restart'],function(){
return gulp.src(PATHS.scripts)
.pipe(tsp())
.pipe(gulp.dest(PATHS.output));
});
// ts
gulp.task('watch-ts',['build-ts'],function(){
gulp.watch(PATHS.scripts,['build-ts']);
});
//
gulp.task('restart',function(){
child = exec('supervisor -w build ./build/server.js',(error,stdout,stderr)=>{
console.log(`stdout: ${stdout}`);
console.log(`stderr: ${stderr}`);
if (error !== null) {
console.log(`exec error: ${error}`);
}
});
});
//
gulp.task('dev',['build-ts','restart','watch-ts']);
또 주의해 야 할 것 은 gulp 가 ts 파일 의 변 화 를 감시 하기 때문에 tsconfig.json 에서"watch"를 false 로 설정 하거나 삭제 하 십시오.
2.tsconfig.json 을 사용 하여 ts 파일 의 변 화 를 감시 하고 서버 를 다시 시작 합 니 다.
이러한 방식 으로 먼저 tsconfig.json 이 ts 파일 에 대한 감 시 를 열 고 gulpfile.js 파일 을 수정 합 니 다.다음 과 같 습 니 다.
//...requier ，
let tsChild, // ts
serverChild; //
// ts
gulp.task('build-ts',function(){
tsChild = exec('tsc',(error,stdout,stderr)=>{
console.log(`tsc====>stdout: ${stdout}`);
console.log(`tsc====>stderr: ${stderr}`);
if (error !== null) {
console.log(`exec error: ${error}`);
}
});
});
//
gulp.task('restart',function(){
serverChild = exec('supervisor -w build ./build/server.js',(error,stdout,stderr)=>{
console.log(`restart=====>stdout: ${stdout}`);
console.log(`restart=====>stderr: ${stderr}`);
if (error !== null) {
console.log(`exec error: ${error}`);
}
});
});
//
gulp.task('dev2',['build-ts','restart']);
이상 에서 해결 방법 을 제공 하 는 방식 과 방향 은 참고 만 하고 실제 환경 에 사용 하면 기능 을 계속 보완 해 야 한다.
결어
본 고 는 type:script 개발 node.js 프로젝트 를 구축 하 는 환경 에 대해 간단 한 연구 와 기록 을 할 뿐이다.
처음에는 그렇게 생각 했 지만 그 럴 수 있 을 지 궁금 했다.실제로 node.js 안정 버 전 v 6.9.1 에 서 는 ES6 의 90%를 지원 했다.따라서 ES6 개발 node.js 프로젝트 를 직접 사용 하 는 것 이 좋 습 니 다.
미 비 한 점 은 양해 해 주시 고 나중에 천천히 보충 해 드 리 겠 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
노드 스트림에 대한 부드러운 소개쓰기 가능: 데이터를 쓸 수 있는 스트림입니다. 예를 들어 fs.createWriteStream()를 사용하면 스트림을 사용하여 파일에 데이터를 쓸 수 있습니다. 읽기 가능: 데이터를 읽을 수 있는 스트림입니다. 예...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
