[英]How can I get the Typescript compiler to output the compiled js to a different directory?
I'm fairly new to TypeScript, and right now I have .ts files in several places throughought my project structure:我对 TypeScript 还很陌生,现在我在项目结构中的几个地方都有 .ts 文件:
app/
|-scripts/
|-app.ts
|
|-classes/
| |-classA.ts
| |-classB.ts
|
|-controllers/
| |-controllerA.ts
| |-controllerB.ts
|
|-otherStuff/
|-otherstuffA.ts
Right now, when my files are compiled, they are compiled to the same directory that the .ts fles are in:现在,当我的文件被编译时,它们被编译到 .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
While I like the way that the .js files keep the same directory structure as the .ts files, I don't want to track the .js files in my VCS, so I'd like to keep all of my JavaScript files in a separate directory tree (that I can then add to .gitignore), like so:虽然我喜欢 .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
Is there a setting or option somewhere that will tell the TypeScript compiler to do this?是否有某个设置或选项会告诉 TypeScript 编译器执行此操作? Also, I'm not sure if it's relevant, but I am using WebStorm.
另外,我不确定它是否相关,但我正在使用 WebStorm。
Use the option --outDir
on tsc (configured within the File Watcher in IntelliJ)在 tsc 上使用选项
--outDir
(在 IntelliJ 的文件观察器中配置)
From the command line documentation从命令行文档
--outDir DIRECTORY Redirect output structure to the directory.
Edit编辑
Since Typescript 1.5, this can also be set in the tsconfig.json
file:从 Typescript 1.5 开始,这也可以在
tsconfig.json
文件中设置:
"compilerOptions": {
"outDir": "DIRECTORY"
...
或者,将"outDir": "build"
到 tsconfig.json 文件
Though these answers are correct you should consider whether you actually just want to hide your .js files from your IDE .尽管这些答案是正确的,但您应该考虑是否真的只是想从 IDE 中隐藏 .js 文件。
In Visual Studio Code, go to File > Preferences > Settings
or your .vscode\\settings.json
file and enter:在 Visual Studio Code 中,转到
File > Preferences > Settings
或您的.vscode\\settings.json
文件并输入:
"files.exclude": {
"**/.git": true,
"**/.DS_Store": true,
"**/*.js" : {
"when": "$(basename).ts"
},
"**/*.js.map": {
"when": "$(basename)"
}
}
The above hides .js files where a corresponding .ts file exists.以上隐藏了 .js 文件,其中存在相应的 .ts 文件。
Intellij Users, compile Typescript to multiple output directories Intellij 用户,将 Typescript 编译到多个输出目录
For Intellij users this may be useful.对于 Intellij 用户,这可能很有用。 This was how I got this to work using the built in Typescript Compiler.
这就是我使用内置的 Typescript 编译器让它工作的方式。
Environment Info环境信息
Example Directory Structure示例目录结构
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 Setup Intellij 设置
C:\\yourUserName\\AppData\\Roaming\\npm\\node_modules\\typescript\\lib
C:\\yourUserName\\AppData\\Roaming\\npm\\node_modules\\typescript\\lib
-m amd -t ES6 -outDir E:\\myapp\\js
-m amd -t ES6 -outDir E:\\myapp\\js
E:\\myapp\\ts\\main.ts
If this is not checked then all of your files will try to output to your outDir path. E:\\myapp\\ts\\main.ts
如果未选中此项,则您的所有文件都将尝试输出到您的 outDir 路径。I setup package.json like this so that typing npm run start
outputs everything to build
.我像这样设置 package.json 以便键入
npm run start
输出要build
所有内容。 The source files are kept in src
.源文件保存在
src
。 The outfile is specified by --outDir build
. 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"
}
}
You can exclude your build directory in tsconfig.json, though it probably isn't necessary, since there is only JS there:您可以在 tsconfig.json 中排除您的构建目录,尽管这可能不是必需的,因为那里只有 JS:
{
"compilerOptions": {
"target": "ES5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"build"
]
}
If you like to map the directory structure of the app/scripts folder in js, I'd suggest using the following settings for your file watcher:如果您想在 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
Im using Atom with the atom-typescript extension and my tsconfig.json looks like this:我将 Atom 与 atom-typescript 扩展一起使用,我的 tsconfig.json 如下所示:
{
"compilerOptions": {
"outDir":"js"
}
}
Regarding Grunt, currently to save your dev folder project structure in production and not get an unexpected result after files have compiled, please refer to the option:关于 Grunt,目前为了在生产中保存你的 dev 文件夹项目结构,并且在文件编译后不会出现意外结果,请参考选项:
compilerOptions: {
rootDir: 'devFolder'
// ...
}
See the rootDir option in official grunt-ts docs.请参阅官方 grunt-ts 文档中的rootDir选项。
I hope it will help someone if they get stuck and get a weird result in production.我希望如果有人遇到困难并在生产中得到奇怪的结果,它会有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.