web-dev-qa-db-fra.com

TypeScript - Comment conserver les fichiers compilés dans un répertoire séparé?

Je suis assez nouveau sur TypeScript et, à l'heure actuelle, j'ai des fichiers .ts à plusieurs endroits tout au long de 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 celui dans lequel se trouvent 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'apprécie le fait que les fichiers .js conservent la même structure de répertoires que les fichiers .ts, je ne souhaite pas suivre les fichiers .js de mon VCS. Par conséquent, j'aimerais conserver tous mes fichiers JavaScript dans un fichier. 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

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

javascripttypescriptwebstormdirectory-structuretsc
95
TheGuyWithTheFace

Utilisez l'option --outDir on tsc (configuré dans l'observateur de fichiers dans IntelliJ)

Depuis 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.json fichier:

"compilerOptions": {
    "outDir": "DIRECTORY"
    ...
109
Bruno Grieder

Ou, ajoutez "outDir": "build"to tsconfig.json fichier

30
Qingshan

Bien que ces réponses soient correctes, vous devriez vous demander si vous voulez simplement cacher vos fichiers .js à votre IDE.

Dans Visual Studio Code, accédez à File > Preferences > Settings ou votre .vscode\settings.json fichier 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 contenant un fichier .ts correspondant.

4
Dave Clark

J'ai installé package.json comme ça pour que taper npm run start tout en sortie sur build. Les fichiers sources sont conservés dans src. Le fichier de sortie 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 à cet emplacement:

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

Si vous souhaitez mapper la structure de répertoires du dossier app/scripts dans js, nous vous suggérons 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
3
lena

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 obtenu cela avec le compilateur TypeScript intégré.

Informations sur l'environnement

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 intelligente

  • Fichier -> Paramètres -> TypeScript
  • Node Interpreter: Votre chemin d'installation NodeJS
  • Version du compilateur: généralement situé à l'adresse C:\yourUserName\AppData\Roaming\npm\node_modules\TypeScript\lib
  • Options de ligne de commande: -m AMD -t ES6 -outDir E:\myapp\js
  • Vérifiez la compilation du fichier principal uniquement et pointez-le sur votre fichier d'entrée. E:\myapp\ts\main.ts Si cette case n'est pas cochée, tous vos fichiers essaieront de sortir dans votre chemin outDir.

enter image description here

2
Kris Hollenbeck

En utilisant Atom avec l'extension atom-TypeScript et mon tsconfig.json ressemble à ceci:

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