Typescript 컴파일러가 컴파일된 js를 다른 디렉토리에 출력하도록 하려면 어떻게 해야 합니까?

Typescript 컴파일러가 컴파일된 js를 다른 디렉토리에 출력하도록 하려면 어떻게 해야 합니까?

저는 TypeScript에 익숙하지 않습니다.현재 프로젝트 구조를 통해 .ts 파일을 여러 곳에 보유하고 있습니다.

app/
 |-scripts/
    |-app.ts
    |
    |-classes/
    |  |-classA.ts
    |  |-classB.ts
    |  
    |-controllers/
    |  |-controllerA.ts
    |  |-controllerB.ts
    |  
    |-otherStuff/
       |-otherstuffA.ts

현재 파일이 컴파일되면 .ts fles와 같은 디렉토리에 컴파일됩니다.

app/
 |-scripts/
    |-app.ts
    |-app.js
    |
    |-classes/
    |  |-classA.ts
    |  |-classB.ts
    |  |-classA.js
    |  |-classB.js
    |  
    |-controllers/
    |  |-controllerA.ts
    |  |-controllerB.ts
    |  |-controllerA.js
    |  |-controllerB.js
    |  
    |-otherStuff/
       |-otherstuffA.ts
       |-otherStuffA.js

.js 파일이 .ts 파일과 동일한 디렉토리 구조를 유지하는 방법은 좋지만 VCS에서 .js 파일을 추적하고 싶지 않기 때문에 모든 JavaScript 파일을 별도의 디렉토리 트리(.gitignore에 추가할 수 있음)에 보관하고 싶습니다.

app/
 |-scripts/
 |  |-app.ts
 |  |
 |  |-classes/
 |  |  |-classA.ts
 |  |  |-classB.ts
 |  |  
 |  |-controllers/
 |  |  |-controllerA.ts
 |  |  |-controllerB.ts
 |  |  
 |  |-otherStuff/
 |     |-otherstuffA.ts
 |
 |-js/
    |-app.js
    |
    |-classes/
    |  |-classA.js
    |  |-classB.js
    |
    |-controllers/
    |  |-controllerA.js
    |  |-controllerB.js
    |
    |-otherStuff/
       |-otherstuffA.js

TypeScript 컴파일러에 이를 지시하는 설정 또는 옵션이 있습니까?또, 관련이 있는지는 모르겠지만, Web Storm을 사용하고 있습니다.

Typescript 1.5 이후에서는, 이 설정을 실시할 수도 있습니다.tsconfig.json파일:

"compilerOptions": {
    "outDir": "DIRECTORY"
    ...

독창적인 대답

옵션 사용--outDiron tsc (IntelliJ의 파일워처 내에서 설정)

명령줄 문서

--outDir DIRECTORY Redirect output structure to the directory.

또는 추가"outDir": "build"tsconfig.json 파일로 전송

이러한 답변은 맞지만 실제로 IDE에서 .js 파일을 숨길지 여부를 고려해야 합니다.

Visual Studio Code에서 로 이동합니다.File > Preferences > Settings또는 당신의.vscode\settings.json파일을 입력하고 다음을 입력합니다.

"files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true,
    "**/*.js" : {
        "when": "$(basename).ts"
    },
    "**/*.js.map": {
        "when": "$(basename)"
    }
}

위에서는 대응하는 .ts 파일이 존재하는 .js 파일을 숨깁니다.

Intelij 사용자, 여러 출력 디렉토리에 Typescript를 컴파일

Intelij 사용자에게는 도움이 될 수 있습니다.이렇게 해서 내장된 Typescript 컴파일러를 사용하여 이 작업을 수행할 수 있게 되었습니다.

환경 정보

• 윈도 7
• NPM 버전 1.7.3을 사용한 타이프 스크립트
• 인텔리 14
• ES6
• 요건 사용JS

디렉토리 구조 예시

BEFORE COMPILE
----------------------------------------
-> JS
   -> app
      -> config.js  //this is not generated
   -> libs
      -> jquery.js  //this is not generated
   -> plugins
-> TS
   -> app
      -> main.ts
   -> libs
      -> jquery.d.ts
   -> plugins
      -> somePlugin.ts

AFTER COMPILE
----------------------------------------
-> JS
   -> app
      -> config.js  //this is not generated
      -> main.js
   -> libs
      -> jquery.js  //this is not generated
   -> plugins
      somePlugin.ts
-> TS
   -> app
      -> main.ts
   -> libs
      -> jquery.d.ts    //this is where I kept my definition files
   -> plugins
      -> somePlugin.ts

Intelij 셋업

• 파일 -> 설정 -> 타입 스크립트
• 노드 인터프리터:NodeJS 설치 경로
• 컴파일러 버전: 보통 다음 위치에 있습니다.C:\yourUserName\AppData\Roaming\npm\node_modules\typescript\lib
• 명령줄 옵션:-m amd -t ES6 -outDir E:\myapp\js
• 메인 파일만 컴파일하고 엔트리 파일을 가리킵니다. E:\myapp\ts\main.ts선택하지 않으면 모든 파일이 outDir 경로로 출력을 시도합니다.

패키지를 셋업합니다.이렇게 해서 타이핑할 수 있게npm run start모든 것을 출력하다build. 소스 파일은 에 보관됩니다.srcoutfile은 에 의해 지정됩니다.--outDir build.

{
  "name": "myapp",
  "version": "0.0.1",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w --outDir build",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  },
  "license": "private",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.1",
    "typescript": "^1.7.3"
  }
}

tsconfig.json에는 JS밖에 없기 때문에 필요하지 않을 수도 있지만 빌드 디렉토리는 제외할 수 있습니다.

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "build"
  ]
}

앱/스크립트 폴더의 디렉토리 구조를 js로 매핑하고 싶다면 파일 감시자에 대해 다음 설정을 사용하는 것이 좋습니다.

Arguments: --sourcemap --outDir $ProjectFileDir$/js/$FileDirPathFromParent(scripts)$ $FileName$
Working Directory: $FileDir$
Output Paths To Refresh: $ProjectFileDir$/js/$FileDirPathFromParent(scripts)$/$FileNameWithoutExtension$.js:$ProjectFileDir$/js/$FileDirPathFromParent(scripts)$/$FileNameWithoutExtension$.js.map

atom-typescript 확장자와 tsconfig.json을 함께 사용하는 경우 다음과 같습니다.

{
  "compilerOptions": {
    "outDir":"js"
  }
}

하다
tsc index.ts --outDir .temp && node .temp/index.js && rm -rf .temp

Grunt에 대해서는 현재 dev 폴더 프로젝트 구조를 실제 가동 중에 저장하고 파일 컴파일 후 예기치 않은 결과를 얻지 않도록 하기 위해 다음 옵션을 참조하십시오.

compilerOptions: { 
 rootDir: 'devFolder'
 // ...
}

공식 grunt-ts 문서의 rootDir 옵션을 참조하십시오.

만약 그들이 막히고 생산에서 이상한 결과를 얻으면 도움이 될 것이다.

언급URL : https://stackoverflow.com/questions/24454371/how-can-i-get-the-typescript-compiler-to-output-the-compiled-js-to-a-different-d