Comment puis-je demander au compilateur Typescript de sortir les js compilés dans un répertoire différent?

Je suis assez nouveau dans TypeScript, et pour le moment, j'ai des fichiers .ts à plusieurs endroits grâce à la structure de mon projet:

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

À l'heure actuelle, lorsque mes fichiers sont compilés, ils sont compilés dans le même répertoire que les fichiers .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

Bien que j'aime la façon dont les fichiers .js conservent la même structure de répertoires que les fichiers .ts, je ne veux pas suivre les fichiers .js dans mon VCS, donc j'aimerais garder tous mes fichiers JavaScript dans un arborescence de répertoires séparée (que je peux ensuite ajouter à .gitignore), comme ceci:

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

Y a-t-il un paramètre ou une option quelque part qui dira au compilateur TypeScript de faire cela? De plus, je ne sais pas si c'est pertinent, mais j'utilise WebStorm.

Utilisez l'option --outDirsur tsc (configurée dans File Watcher dans IntelliJ)

À partir de la documentation en ligne de commande

--outDir DIRECTORY Redirect output structure to the directory.

Éditer

Depuis Typescript 1.5, cela peut également être défini dans le tsconfig.jsonfichier:

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

Ou ajoutez "outDir": "build"au fichier tsconfig.json

Bien que ces réponses soient correctes, vous devez vous demander si vous souhaitez simplement masquer vos fichiers .js de votre IDE .

Dans Visual Studio Code, accédez à File > Preferences > Settingsou votre .vscode\settings.jsonfichier et entrez:

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

Ce qui précède masque les fichiers .js où existe un fichier .ts correspondant.

Si vous souhaitez mapper la structure de répertoires du dossier app / scripts dans js, je vous suggère d'utiliser les paramètres suivants pour votre observateur de fichiers:

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

Utilisateurs Intellij, compilez Typescript dans plusieurs répertoires de sortie

Pour les utilisateurs d'Intellij, cela peut être utile. C'est ainsi que j'ai fait fonctionner cela en utilisant le compilateur Typescript intégré.

Informations sur l'environnement

• Windows 7
• Typographie utilisant NPM version 1.7.3
• Intellij 14
• ES6
• Utilisation de RequireJS

Exemple de structure de répertoire

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

Configuration Intellij

• Fichier -> Paramètres -> Typographie
• Interpréteur de nœuds: votre chemin d'installation NodeJS
• Version du compilateur: généralement situé à C:\yourUserName\AppData\Roaming\npm\node_modules\typescript\lib
• Options de ligne de commande: -m amd -t ES6 -outDir E:\myapp\js
• Vérifiez uniquement le fichier principal de compilation et pointez-le vers votre fichier d'entrée. E:\myapp\ts\main.tsSi ce n'est pas coché, tous vos fichiers essaieront de sortir vers votre chemin outDir.

J'ai configuré package.json comme ceci pour que la saisie npm run startrenvoie tout vers build. Les fichiers source sont conservés au format src. Le fichier est spécifié par --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"
  }
}

Vous pouvez exclure votre répertoire de construction dans tsconfig.json, bien que ce ne soit probablement pas nécessaire, car il n'y a que JS:

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

J'utilise Atom avec l'extension atom-typescript et mon tsconfig.json ressemble à ceci:

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

En ce qui concerne Grunt, actuellement pour enregistrer la structure de votre projet de dossier de développement en production et ne pas obtenir un résultat inattendu après la compilation des fichiers, veuillez vous référer à l'option:

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

Voir l' option rootDir dans la documentation officielle de grunt-ts.

J'espère que cela aidera quelqu'un s'il reste coincé et obtient un résultat étrange en production.