Bagaimana saya bisa mendapatkan compiler Typecript untuk mengeluarkan js yang dikompilasi ke direktori yang berbeda?

Saya cukup baru mengenal TypeScript, dan saat ini saya memiliki file .ts di beberapa tempat melalui memikirkan struktur proyek saya:

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

Saat ini, ketika file saya dikompilasi, mereka dikompilasi ke direktori yang sama dengan file .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

Meskipun saya menyukai cara file .js mempertahankan struktur direktori yang sama dengan file .ts, saya tidak ingin melacak file .js di VCS saya, jadi saya ingin menyimpan semua file JavaScript saya di pohon direktori terpisah (yang kemudian dapat saya tambahkan ke .gitignore), seperti ini:

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

Apakah ada pengaturan atau opsi di suatu tempat yang akan memberi tahu compiler TypeScript untuk melakukan ini? Juga, saya tidak yakin apakah itu relevan, tetapi saya menggunakan WebStorm.

Gunakan opsi --outDirdi tsc (dikonfigurasi dalam Pengamat File di IntelliJ)

Dari dokumentasi baris perintah

--outDir DIRECTORY Redirect output structure to the directory.

Sunting

Sejak Typecript 1.5, ini juga dapat disetel di tsconfig.jsonfile:

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

Atau, tambahkan "outDir": "build"ke file tsconfig.json

Meskipun jawaban ini benar, Anda harus mempertimbangkan apakah Anda sebenarnya hanya ingin menyembunyikan file .js dari IDE Anda .

Dalam Visual Studio Code, buka File > Preferences > Settingsatau .vscode\settings.jsonfile Anda dan masukkan:

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

Di atas menyembunyikan file .js di mana file .ts yang sesuai ada.

Jika Anda ingin memetakan struktur direktori dari folder app / scripts di js, saya sarankan menggunakan pengaturan berikut untuk pengamat file Anda:

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

Pengguna Intellij, kompilasi Typecript ke beberapa direktori keluaran

Bagi pengguna Intellij ini semoga bermanfaat. Ini adalah bagaimana saya membuat ini bekerja menggunakan Compiler Typecript bawaan.

Info Lingkungan

• Windows 7
• Ketikan menggunakan NPM Versi 1.7.3
• Intellij 14
• ES6
• Menggunakan RequireJS

Contoh Struktur Direktori

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

Penyiapan Intellij

• File -> Pengaturan -> Ketikan
• Penerjemah Node: Jalur Pemasangan NodeJS Anda
• Versi Kompilator: biasanya terletak di C:\yourUserName\AppData\Roaming\npm\node_modules\typescript\lib
• Opsi Baris Perintah: -m amd -t ES6 -outDir E:\myapp\js
• Periksa kompilasi file utama saja dan arahkan ke file entri Anda. E:\myapp\ts\main.tsJika ini tidak dicentang maka semua file Anda akan mencoba untuk dikeluarkan ke jalur outDir Anda.

Saya mengatur package.json seperti ini sehingga mengetik npm run startmenghasilkan semuanya build. File sumber disimpan di src. Outfile ditentukan oleh --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"
  }
}

Anda dapat mengecualikan direktori build Anda di tsconfig.json, meskipun itu mungkin tidak diperlukan, karena hanya ada JS di sana:

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

Saya menggunakan Atom dengan ekstensi atom-typescript dan tsconfig.json saya terlihat seperti ini:

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

Mengenai Grunt, saat ini untuk menyimpan struktur proyek folder dev Anda dalam produksi dan tidak mendapatkan hasil yang tidak diharapkan setelah file dikompilasi, lihat opsi:

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

Lihat opsi rootDir di dokumen resmi grunt-ts.

Saya berharap ini akan membantu seseorang jika mereka terjebak dan mendapatkan hasil yang aneh dalam produksi.