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

저는 TypeScript를 처음 접했으며 현재 프로젝트 구조를 통해 여러 위치에 .ts 파일이 있습니다.

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

지금 내 파일이 컴파일 될 때 .ts 파일이있는 동일한 디렉토리에 컴파일됩니다.

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 컴파일러에게이 작업을 수행하도록 지시하는 설정이나 옵션이 있습니까? 또한 관련성이 있는지 확실하지 않지만 WebStorm을 사용하고 있습니다.

--outDirtsc 의 옵션 사용 (IntelliJ의 File Watcher 내에서 구성됨)

명령 줄 문서에서

--outDir DIRECTORY Redirect output structure to the directory.

편집하다

Typescript 1.5부터 다음과 같이 tsconfig.json파일 에서도 설정할 수 있습니다 .

"compilerOptions": {
    "outDir": "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 파일을 숨 깁니다.

js에서 app / scripts 폴더의 디렉토리 구조를 매핑하려면 파일 감시자에 대해 다음 설정을 사용하는 것이 좋습니다.

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

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

Intellij 사용자에게 유용 할 수 있습니다. 이것이 내가 내장 Typescript 컴파일러를 사용하여 작동하게 한 방법입니다.

환경 정보

• 윈도우 7
• NPM 버전 1.7.3을 사용하는 Typescript
• Intellij 14
• ES6
• RequireJS 사용

디렉토리 구조의 예

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

Intellij 설정

• 파일-> 설정-> Typescript
• 노드 인터프리터 : NodeJS 설치 경로
• 컴파일러 버전 : 일반적으로 C:\yourUserName\AppData\Roaming\npm\node_modules\typescript\lib
• 명령 줄 옵션 : -m amd -t ES6 -outDir E:\myapp\js
• 주 파일 만 컴파일하고 항목 파일을 가리 킵니다. E:\myapp\ts\main.ts선택하지 않으면 모든 파일이 outDir 경로로 출력을 시도합니다.

나는 이렇게 package.json을 설정하여 타이핑하면 npm run start모든 것을 build. 소스 파일은 src. outfile은에 의해 지정됩니다 --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"
  ]
}

Atom을 atom-typescript 확장과 함께 사용하고 tsconfig.json은 다음과 같습니다.

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

Grunt와 관련하여 현재 프로덕션에서 dev 폴더 프로젝트 구조를 저장하고 파일을 컴파일 한 후 예기치 않은 결과를 얻지 않으려면 다음 옵션을 참조하십시오.

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

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

누군가가 막히고 이상한 결과를 얻는다면 누군가에게 도움이되기를 바랍니다.