TypeScript – 如何保持编译的文件在一个单独的目录？
我是相当新的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。
在tsc上使用选项--outDir （在IntelliJ中的File Watcher中configuration）
从命令行文档
--outDir DIRECTORY Redirect output structure to the directory.
编辑
由于Typescript 1.5，这也可以在tsconfig.json文件中设置：
"compilerOptions": { "outDir": "DIRECTORY" ...
或者，将"outDir": "build"到tsconfig.json文件中
如果你想在js中映射app / scripts文件夹的目录结构，我build议你使用以下设置为你的文件观察者：
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编译器。
环境信息
- Windows 7的
- 使用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安装path
- 编译器版本：通常位于
C:\yourUserName\AppData\Roaming\npm\node_modules\typescript\lib - 命令行选项：
-m amd -t ES6 -outDir E:\myapp\js - 只检查编译主文件，并将其指向您的input文件。
E:\myapp\ts\main.ts如果没有选中，那么你所有的文件都会尝试输出到你的outDirpath。
我像这样设置package.json，以便inputnpm run start输出所有内容。 源文件保存在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中排除你的编译目录，尽pipe可能没有必要，因为在那里只有JS：
{ "compilerOptions": { "target": "ES5", "module": "system", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false }, "exclude": [ "node_modules", "build" ] }
尽pipe这些答案是正确的，但您应该考虑是否实际上只想隐藏IDE中的.js文件 。
在Visual Studio代码中，转到File > Preferences > Settings或.vscode\settings.json文件，然后input：
"files.exclude": { "**/.git": true, "**/.DS_Store": true, "**/*.js" : { "when": "$(basename).ts" }, "**/*.js.map": { "when": "$(basename)" } }
上面隐藏.ts文件存在相应的.ts文件。
我使用Atom与primefaces打字稿扩展和我的tsconfig.json看起来像这样：
{ "compilerOptions": { "outDir":"js" } }
