如何让 Typescript 编译器将编译后的 js 输出到不同的目录？答案

【问题标题】：How can I get the Typescript compiler to output the compiled js to a different directory?如何让 Typescript 编译器将编译后的 js 输出到不同的目录？
【发布时间】：2014-06-27 14:31:47
【问题描述】：

我对 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。

【问题讨论】：

我认为当你有编辑器配置/tsconfig/webpack 配置时事情会变得复杂......（只是说说我的感受......）

标签： javascript typescript tsc

【解决方案1】：

从 Typescript 1.5 开始，这也可以在tsconfig.json 文件中设置：

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

原答案

在 tsc 上使用选项 --outDir（在 IntelliJ 的文件观察器中配置）

来自命令行文档

--outDir DIRECTORY Redirect output structure to the directory.

【讨论】：

这正是我想要的！非常感谢，我不敢相信我以前没有看到它......
我相信现在你也可以使用--rootDir 标志将一个公共根文件夹传递给转译器。这样可以避免让它找到一个公共根文件夹。
为什么这个选项需要system或者amd？我不希望构建依赖于它们。
除了，这似乎在 2.0 中破坏了它？ stackoverflow.com/a/40149682/550975
这还能用吗？通过 webpack 构建时似乎不起作用。

【解决方案2】：

或者，将"outDir": "build"添加到 tsconfig.json 文件中

【讨论】：

注意："outDir": "build" 位于 tsconfig.json 的 "compilerOptions" 对象中，而不是顶级属性。

【解决方案3】：

虽然这些答案是正确的，但您应该考虑您是否真的只是想在 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 文件。

【讨论】：

我知道这是很久以前的事了，但我很好奇，不使用构建文件夹是否有优势，或者您只是提供替代方案？
@theaceofthespade 如果您想在源文件夹中包含或读取与__dirname 相关的文件，这很有用。（例如.graphql 架构文件）

【解决方案4】：

Intellij 用户，将 Typescript 编译到多个输出目录

对于 Intellij 用户，这可能很有用。这就是我如何使用内置的 Typescript 编译器让它工作的方式。

环境信息

Windows 7
Typescript using NPM 1.7.3 版
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 设置

文件 -> 设置 -> 打字稿
节点解释器：您的 NodeJS 安装路径
编译器版本：通常位于C:\yourUserName\AppData\Roaming\npm\node_modules\typescript\lib
命令行选项：-m amd -t ES6 -outDir E:\myapp\js
仅检查编译主文件并将其指向您的入口文件。 E:\myapp\ts\main.ts 如果未选中此项，那么您的所有文件都会尝试输出到您的 outDir 路径。

【讨论】：

【解决方案5】：

我这样设置 package.json 以便输入 npm run start 将所有内容输出到 build。源文件保存在src。输出文件由--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"
  ]
}

【讨论】：

谢谢，如果您选择添加构建目录，排除构建目录非常重要，否则构建和监视命令将不断抱怨，由于 .d.ts 文件。

【解决方案6】：

如果您想在 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

【讨论】：

这确实解决了文件观察器的问题，但是由于该功能已被弃用并被TypeScript Compiler取代，那么编译器是如何完成的？

【解决方案7】：

我使用带有 atom-typescript 扩展的 Atom，我的 tsconfig.json 看起来像这样：

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

【讨论】：

【解决方案8】：

关于 Grunt，目前为了在生产中保存你的 dev 文件夹项目结构，并且在文件编译后不会得到意外结果，请参考选项：

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

请参阅官方 grunt-ts 文档中的 rootDir 选项。

如果有人在生产中遇到困难并得到奇怪的结果，我希望它会有所帮助。

【讨论】：