¿Cómo puedo hacer que el compilador de TypeScript genere los js compilados en un directorio diferente?

119

Soy bastante nuevo en TypeScript, y ahora mismo 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 están 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

Si bien me gusta la forma en que los archivos .js mantienen la misma estructura de directorio que los archivos .ts, no quiero rastrear los archivos .js en mi VCS, así que me gustaría mantener todos mis archivos JavaScript en un árbol de directorio separado (que luego puedo agregar a .gitignore), así:

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

¿Existe una configuración u opción en algún lugar que le diga al compilador de TypeScript que haga esto? Además, no estoy seguro de si es relevante, pero estoy usando WebStorm.

TheGuyWithTheFace
fuente
Creo que las cosas se complican cuando tienes Editor Configuration / tsconfig / webpack config ... (solo contando mis sentimientos ...)
Yarco

Respuestas:

134

Use la opción --outDiren tsc (configurada dentro de File Watcher en IntelliJ)

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

--outDir DIRECTORY Redirect output structure to the directory.

Editar

Desde TypeScript 1.5, esto también se puede configurar en el tsconfig.jsonarchivo:

"compilerOptions": {
    "outDir": "DIRECTORY"
    ...
Bruno Grieder
fuente
¡Esto es exactamente lo que estaba buscando! Muchas gracias, no puedo creer que no lo haya visto antes ...
TheGuyWithTheFace
3
Creo que ahora también puede usar la --rootDirbandera para pasar una carpeta raíz común al transpilador. Esto evita que encuentre una carpeta raíz común.
Guzmonne
¿Por qué esta opción debe ser system o amd? No quiero que la construcción dependa de ellos.
Nikos
Excepto, ¿esto parece romperlo en 2.0? stackoverflow.com/a/40149682/550975
Serj Sagan
2
¿Esto todavía funciona? No parece funcionar cuando se crea a través del paquete web.
Mattnedrich
30

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

Qingshan
fuente
21
Nota: "outDir": "build"va en el "compilerOptions"objeto de su tsconfig.json, no como una propiedad de nivel superior.
Jamie
7

Aunque estas respuestas son correctas, debe considerar si realmente solo desea ocultar sus archivos .js de su IDE .

En Visual Studio Code, vaya a File > Preferences > Settingso su .vscode\settings.jsonarchivo 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.

Dave Clark
fuente
2
Sé que esto es de hace un tiempo, pero tenía curiosidad, ¿hay alguna ventaja en no usar carpetas de compilación o simplemente estaba ofreciendo una alternativa?
theaceofthespade
1
@theaceofthespade Es útil si desea incluir o leer archivos en su carpeta de origen relacionados con __dirname. (Por ejemplo, un .graphqlarchivo de esquema)
janispritzkau
3

Si desea mapear la estructura del directorio de la carpeta app / scripts en js, le sugiero que use la siguiente configuración para su observador 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
lena
fuente
1
De hecho, esto resuelve el problema con un observador de archivos, pero dado que esta función está obsoleta y se reemplazó con el compilador de TypeScript, ¿cómo se hace con el compilador?
Nitzan Tomer
3

Usuarios de Intellij, compile TypeScript en múltiples directorios de salida

Para los usuarios de Intellij, esto puede resultar útil. Así fue como logré que esto funcionara usando el compilador de TypeScript integrado.

Información medioambiental

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 de 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
  • Compruebe compilar solo el archivo principal y apúntelo a su archivo de entrada. E:\myapp\ts\main.tsSi esto no está marcado, todos sus archivos intentarán salir a su ruta outDir.

ingrese la descripción de la imagen aquí

Kris Hollenbeck
fuente
3

Configuré package.json así para que al escribir npm run starttodo salga a build. Los archivos de origen se guardan en formato src. El archivo de salida está especificado por --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"
  ]
}
Josh
fuente
1

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

{
  "compilerOptions": {
    "outDir":"js"
  }
}
Daveman
fuente
-1

Con respecto a Grunt, actualmente para guardar la estructura del proyecto de la carpeta de desarrollo en producción y no obtener un resultado inesperado después de que se hayan compilado los archivos, consulte la opción:

compilerOptions: { 
 rootDir: 'devFolder'
 // ...
}

Vea la opción rootDir en los documentos oficiales de grunt-ts.

Espero que ayude a alguien si se atasca y obtiene un resultado extraño en la producción.

Vladislav Stuk
fuente