javascript - debug - TypeScript-¿Cómo mantener los archivos compilados en un directorio separado?

intellij typescript

Question

Soy bastante nuevo en TypeScript, y ahora tengo archivos .ts en varios lugares a través de la estructura de mi proyecto:

app/
|-scripts/
|-app.ts
|
|-classes/
| |-classA.ts
| |-classB.ts
|
|-controllers/
| |-controllerA.ts
| |-controllerB.ts
|
|-otherStuff/
|-otherstuffA.ts

En este momento, cuando se compilan mis archivos, se compilan en el mismo directorio en el que se encuentran los archivos .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

Aunque me gusta la forma en que los archivos .js mantienen la misma estructura de directorios que los archivos .ts, no quiero seguir los archivos .js en mi VCS, así que me gustaría mantener todos mis archivos JavaScript en una árbol de directorios por separado (que luego puedo agregar a .gitignore), como sigue:

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

¿Hay alguna configuración u opción en alguna parte que le dirá al compilador de TypeScript que haga esto? Además, no estoy seguro de si es relevante, pero estoy usando WebStorm.

Answer 1

Aunque estas respuestas son correctas, debes considerar si realmente deseas ocultar tus archivos .js de tu IDE .

En Visual Studio Code, vaya a File > Preferences > Settings o su archivo .vscode/settings.json e ingrese:

"files.exclude": {
"**/.git": true,
"**/.DS_Store": true,
"**/*.js" : {
"when": "$(basename).ts"
},
"**/*.js.map": {
"when": "$(basename)"
}
}

Lo anterior oculta los archivos .js donde existe un archivo .ts correspondiente.

Answer 2

Configuré package.json de esta manera para que al escribir npm run start todo para build . Los archivos fuente se guardan en src . El --outDir build de --outDir build se especifica mediante --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"
}
}

Puede excluir su directorio de compilación en tsconfig.json, aunque probablemente no sea necesario, ya que solo hay JS allí:

{
"compilerOptions": {
"target": "ES5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"build"
]
}

Answer 3

Estoy usando Atom con la extensión atom-typescript y mi tsconfig.json se ve así:

{
"compilerOptions": {
"outDir":"js"
}
}

Answer 4

O bien, agregue "outDir": "build" al archivo tsconfig.json

Answer 5

Si desea mapear la estructura del directorio de la aplicación / la carpeta de scripts en js, le sugiero que use la siguiente configuración para su vigilante de archivos:

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

Answer 6

Use la opción --outDir en tsc (configurado dentro de File Watcher en IntelliJ)

De la documentación de la línea de comando

--outDir DIRECTORY Redirect output structure to the directory.

Editar

Desde Typescript 1.5, esto también se puede configurar en el archivo tsconfig.json :

"compilerOptions": {
"outDir": "DIRECTORY"
...

Answer 7

Los usuarios de Intellij compilan Typescript en múltiples directorios de salida

Para usuarios de Intellij esto puede ser útil. Así fue como hice que esto funcionara usando el Compilador de Mecanografía incorporado.

Información del entorno

• Windows 7
• Mecanografiado utilizando NPM versión 1.7.3
• Intellij 14
• ES6
• Usando RequireJS

Ejemplo de estructura de directorio

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

Configuración Intellij

• Archivo -> Configuración -> Mecanografiado
• Intérprete de nodo: su ruta de instalación de NodeJS
• Versión del compilador: normalmente se encuentra en C:/yourUserName/AppData/Roaming/npm/node_modules/typescript/lib
• Opciones de línea de comando: -m amd -t ES6 -outDir E:/myapp/js
• Comprueba solo compilar el archivo principal y apuntalo a tu archivo de entrada. E:/myapp/ts/main.ts Si esto no está marcado, todos sus archivos intentarán enviarse a su ruta de salida.