Typescript derleyicisinin derlenmiş j'leri farklı bir dizine çıkarmasını nasıl sağlayabilirim?


119

TypeScript konusunda oldukça yeniyim ve şu anda proje yapıma göre birkaç yerde .ts dosyalarım var:

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

Şu anda, dosyalarım derlendiğinde, .ts dosyalarının bulunduğu dizinde derleniyorlar:

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

.Js dosyalarının .ts dosyalarıyla aynı dizin yapısını korumasını sevsem de, .js dosyalarını VCS'imde izlemek istemiyorum, bu nedenle tüm JavaScript dosyalarımı bir ayrı dizin ağacı (daha sonra .gitignore'a ekleyebileceğim), şöyle:

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

TypeScript derleyicisine bunu yapmasını söyleyen bir ayar veya seçenek var mı? Ayrıca alakalı olup olmadığından emin değilim ama WebStorm kullanıyorum.


Editör Yapılandırması / tsconfig / webpack yapılandırmanız olduğunda işler karmaşıklaşıyor ... (sadece hislerimi anlatıyorum ...)
Yarco

Yanıtlar:


134

Seçeneği kullanın --outDirTsc'deki (IntelliJ'deki Dosya İzleyici içinde yapılandırılır)

Komut satırı belgelerinden

--outDir DIRECTORY Redirect output structure to the directory.

Düzenle

Typescript 1.5'ten bu yana, bu aynı zamanda tsconfig.jsondosyada da ayarlanabilir :

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

Bu tam olarak aradığım şey! Çok teşekkürler, daha önce görmediğime inanamıyorum ...
TheGuyWithTheFace

3
Artık --rootDirortak bir kök klasörü aktarıcıya iletmek için bayrağı da kullanabileceğinizi düşünüyorum. Bu, ortak bir kök klasör bulmasını engeller.
guzmonne

bu seçeneğin neden sistem veya amd olması gerekiyor? Yapının onlara bağımlı olmasını istemiyorum.
Nikos

Bunun dışında, bu onu 2.0'da kıracak gibi görünüyor? stackoverflow.com/a/40149682/550975
Serj Sagan

2
Bu hala çalışıyor mu? Web paketi aracılığıyla oluştururken işe yaramıyor gibi görünüyor.
mattnedrich

30

Veya "outDir": "build"tsconfig.json dosyasına ekleyin


21
Not: tsconfig.json dosyanızın nesnesine "outDir": "build"gider, "compilerOptions"üst düzey bir özellik olarak değil.
Jamie

7

Bu cevaplar doğru olsa da , .js dosyalarınızı IDE'nizden gerçekten gizlemek isteyip istemediğinizi düşünmelisiniz . .

Visual Studio Code'da dosyanıza File > Preferences > Settingsveya .vscode\settings.jsondosyanıza gidin ve şunu girin:

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

Yukarıdakiler, karşılık gelen bir .ts dosyasının bulunduğu .js dosyalarını gizler.


2
Bunun bir süredir olduğunu biliyorum, ama merak ettim, yapı klasörleri kullanmamanın bir avantajı var mı yoksa sadece bir alternatif mi sunuyordunuz?
theaceofthespade

1
@theaceofthespade Kaynak klasörünüze göre dosya eklemek veya okumak istiyorsanız kullanışlıdır __dirname. (Örneğin bir .graphqlşema dosyası)
janispritzkau

3

Js'de app / scripts klasörünün dizin yapısını eşlemek isterseniz, dosya izleyiciniz için aşağıdaki ayarları kullanmanızı öneririm:

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

1
Bu gerçekten de bir dosya izleyicideki sorunu çözer, ancak bu özellik kullanımdan kaldırıldığı ve TypeScript Derleyicisi ile değiştirildiği için, derleyici ile nasıl yapılır?
Nitzan Tomer

3

Intellij Kullanıcıları, Typescript'i birden çok çıktı dizinine derleyin

Intellij kullanıcıları için bu yararlı olabilir. Bu, yerleşik Typescript Compiler'ı kullanarak çalışmasını sağladım.

Çevre Bilgisi

  • Windows 7
  • NPM Sürüm 1.7.3 kullanan Typescript
  • Intellij 14
  • ES6
  • RequireJS'yi kullanma

Örnek Dizin Yapısı

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

Intellij Kurulumu

  • Dosya -> Ayarlar -> Türler
  • Düğüm Yorumlayıcı: NodeJS Kurulum Yolunuz
  • Derleyici Sürümü: tipik olarak şurada bulunur: C:\yourUserName\AppData\Roaming\npm\node_modules\typescript\lib
  • Komut Satırı Seçenekleri: -m amd -t ES6 -outDir E:\myapp\js
  • Yalnızca ana dosyayı derleyin ve giriş dosyanıza işaret edin. E:\myapp\ts\main.tsBu işaretlenmezse, tüm dosyalarınız outDir yolunuza çıktı vermeyi deneyecektir.

görüntü açıklamasını buraya girin


3

Package.json'ı bu şekilde kurarım, böylece yazarak npm run starther şeyi build. Kaynak dosyalar burada tutulur src. Çıkış dosyası ile belirtilir --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"
  }
}

Derleme dizininizi tsconfig.json içinde hariç tutabilirsiniz, ancak muhtemelen gerekli değildir, çünkü orada yalnızca JS vardır:

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

1

Atom-typecript uzantısıyla Atom kullanıyorum ve tsconfig.json şuna benziyor:

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

-1

Grunt ile ilgili olarak, geliştirici klasörü proje yapınızı şu anda üretimde kaydetmek ve dosyalar derlendikten sonra beklenmedik bir sonuç almamak için lütfen seçeneğe bakın:

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

Resmi grunt-ts belgelerinde rootDir seçeneğine bakın .

Umarım birisine takılıp kalırsa ve üretimde garip bir sonuç alırsa yardımcı olur.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.