![](/img/trans.png)
[英]Get path relative to project directory from within Typescript module compiled to JS
[英]How can I get the Typescript compiler to output the compiled js to a different directory?
我對 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 的文件觀察器中配置)
從命令行文檔
--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)"
}
}
以上隱藏了 .js 文件,其中存在相應的 .ts 文件。
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 路徑。我像這樣設置 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"
]
}
如果您想在 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
我將 Atom 與 atom-typescript 擴展一起使用,我的 tsconfig.json 如下所示:
{
"compilerOptions": {
"outDir":"js"
}
}
關於 Grunt,目前為了在生產中保存你的 dev 文件夾項目結構,並且在文件編譯后不會出現意外結果,請參考選項:
compilerOptions: {
rootDir: 'devFolder'
// ...
}
請參閱官方 grunt-ts 文檔中的rootDir選項。
我希望如果有人遇到困難並在生產中得到奇怪的結果,它會有所幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.