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:
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:
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:
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? Also, I'm not sure if it's relevant, but I am using WebStorm.
Solution 1:
Use the option --outDir
on tsc (configured within the File Watcher in 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:
"compilerOptions": {
"outDir": "DIRECTORY"
...
Solution 2:
Or, add "outDir": "build"
to tsconfig.json file