我对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。
答案 0 :(得分:96)
在tsc上使用选项--outDir
(在IntelliJ中的文件观察器中配置)
从命令行文档
--outDir DIRECTORY Redirect output structure to the directory.
修改强>
自Typescript 1.5以来,这也可以在tsconfig.json
文件中设置:
"compilerOptions": {
"outDir": "DIRECTORY"
...
答案 1 :(得分:28)
或者,将"outDir": "build"
添加到tsconfig.json文件
答案 2 :(得分:3)
如果您想在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
答案 3 :(得分:3)
我将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"
]
}
答案 4 :(得分:3)
虽然这些答案是正确的,但您应该考虑是否真的只想隐藏IDE中的.js文件。
在Visual Studio代码中,转到File > Preferences > Settings
或您的.vscode\settings.json
文件,然后输入:
"files.exclude": {
"**/.git": true,
"**/.DS_Store": true,
"**/*.js" : {
"when": "$(basename).ts"
},
"**/*.js.map": {
"when": "$(basename)"
}
}
以上隐藏.js文件,其中存在相应的.ts文件。
答案 5 :(得分:2)
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设置
C:\yourUserName\AppData\Roaming\npm\node_modules\typescript\lib
-m amd -t ES6 -outDir E:\myapp\js
E:\myapp\ts\main.ts
如果未选中此项,则您的所有文件都会尝试输出到您的outDir路径。答案 6 :(得分:1)
我使用Atom和atom-typescript扩展名,我的tsconfig.json看起来像这样:
{
"compilerOptions": {
"outDir":"js"
}
}
答案 7 :(得分:-1)
关于Grunt,目前要将您的dev文件夹项目结构保存在生产环境中,并且在文件编译后不会出现意外结果,请参考以下选项:
compilerOptions: {
rootDir: 'devFolder'
// ...
}
请参阅官方grunt-ts文档中的rootDir选项。
我希望如果有人卡住并在生产中获得怪异的结果,它将对他们有所帮助。