logo标签列表

如何让Typescript编译器将编译后的js输出到另一个目录？

javascripttypescripttsc
205

我对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文件保持相同的目录结构，但我不想在版本控制系统中跟踪.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配置时，事情会变得复杂...（只是表达我的感受...） - Yarco
听起来你真正想要的只是一个忽略 js 文件的 .gitignore 文件。所以任何类似于 *.js 的东西都应该足够了。 - Patronics
1
@Patronics 我不能代表 OP 说话，但在我的项目中，它仍在从 js 转换到 ts，有 js 源文件和 ts 源文件并存，只有生成的 js 文件需要从源代码控制中排除。因此，让 TypeScript 将其生成的文件输出到其他地方将会很有帮助。 - maurice
10个回答
248
自Typescript 1.5版本以来，这也可以在tsconfig.json文件中设置：
"compilerOptions": {
    "outDir": "DIRECTORY"
    ...
使用选项--outDir（在IntelliJ的File Watcher中进行配置）上的tsc。 从命令行文档中获得。 --outDir DIRECTORY 重定向输出结构到目录。
2
这正是我一直在寻找的！非常感谢，我简直不敢相信之前没看到它... - TheGuyWithTheFace
4
我相信现在你也可以使用 --rootDir 标志来传递一个共同的根文件夹给翻译器。这将避免它查找共同的根文件夹。 - guzmonne
2
为什么这个选项需要是系统或者 AMD？我不想让构建依赖于它们。 - Nikos
2
除此之外，在2.0版本中似乎会出现问题？https://dev59.com/-VwZ5IYBdhLWcg3wLdsF#40149682 - Serj Sagan
4
这还能用吗？在使用 webpack 进行构建时似乎无法正常工作。 - mattnedrich
是的，这在最新版本中可以正常工作，但显然要用“build”之类的东西替换DIRECTORY。另外，就像@josh在下面提到的那样，别忘了在tsconfig.json文件中排除那个目录。 - Michael
36

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

38
注意："outDir": "build" 应该放在你的 tsconfig.json 文件中的 "compilerOptions" 对象中，而不是作为顶层属性。 - Jamie
为了在 IntelliJ 中起作用，我必须点击窗口右下角的 Typescript，然后编译，再点击 tsconfig.json。之后，build 文件夹才出现。 - Chris
9
尽管这些答案是正确的，但你应该考虑是否只是想要从IDE中隐藏.js文件。在Visual Studio Code中，转到“文件->首选项->设置”或您的.vscode\settings.json文件，并输入：
"files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true,
    "**/*.js" : {
        "when": "$(basename).ts"
    },
    "**/*.js.map": {
        "when": "$(basename)"
    }
}

上述代码将隐藏存在相应 .ts 文件的 .js 文件。
2
我知道这是一段时间以前的事情了，但我很好奇，不使用构建文件夹是否有优势，还是你只是提供了另一种选择？ - theaceofthespade
1
@theaceofthespade 如果你想要在源文件夹中相对于__dirname包含或读取文件，这将非常有用。（例如.graphql模式文件） - janispritzkau
3

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

对于Intellij用户，这可能很有用。这是我使用内置的Typescript编译器使其工作的方法。

环境信息

示例目录结构

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
  • Node解释器：您的NodeJS安装路径
  • 编译器版本：通常位于 C:\yourUserName\AppData\Roaming\npm\node_modules\typescript\lib
  • 命令行选项：-m amd -t ES6 -outDir E:\myapp\js
  • 仅检查编译主文件并将其指向您的入口文件。如果未选中此选项，则所有文件都将尝试输出到 outDir 路径。E:\myapp\ts\main.ts

输入图像描述

3

我这样配置了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"
  ]
}
1
谢谢，如果您选择添加它，请务必排除构建目录，否则由于.d.ts文件，构建和监视命令将不断抱怨，这是非常重要的一点。 - Michael
2

如果你想在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
1
这确实解决了文件监视器的问题，但由于该功能已被弃用并替换为TypeScript编译器，那么使用编译器该如何实现呢？ - Nitzan Tomer
0

我正在使用Atom和atom-typescript扩展，我的tsconfig.json文件如下：

{
  "compilerOptions": {
    "outDir":"js"
  }
}
0
尝试使用以下命令：tsc js\typescript\main.ts -w --outDir js\javascript
根据目前的写法，你的回答不够清晰。请编辑以添加更多细节，以帮助他人理解如何解答所提出的问题。你可以在帮助中心找到关于如何撰写好回答的更多信息。 - undefined
-1
以下命令对我来说很有用：
tsc index.ts --outDir .temp && node .temp/index.js && rm -rf .temp

3
你觉得你能不能再解释一下这个答案？ - RamenChef
--outDir 将输出放置在名为 .temp 的目录中。node .temp/index.js 运行 index.ts 的编译结果。rm -rf .temp 删除 .temp 目录及其中的所有编译文件。 - sezanzeb
-2

关于Grunt，在当前为了在编译文件之后将开发文件夹项目结构保存到生产环境中并且不会得到意外的结果，请参考以下选项：

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

请查看官方grunt-ts文档中的rootDir选项。
如果有人在生产过程中遇到问题并得到奇怪的结果，我希望这可以帮助他们。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接