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.
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"
...
或者,将"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 .
In Visual Studio Code, go to File > Preferences > Settings
or your .vscode\\settings.json
file and enter:
"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.
Intellij Users, compile Typescript to multiple output directories
For Intellij users this may be useful. This was how I got this to work using the built in Typescript Compiler.
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
C:\\yourUserName\\AppData\\Roaming\\npm\\node_modules\\typescript\\lib
-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. I setup package.json like this so that typing npm run start
outputs everything to build
. The source files are kept in src
. The outfile is specified by --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:
{
"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:
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:
{
"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:
compilerOptions: {
rootDir: 'devFolder'
// ...
}
See the rootDir option in official grunt-ts docs.
I hope it will help someone if they get stuck and get a weird result in production.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.