Jak uzyskać kompilator Typescript, aby wyprowadzał skompilowany plik js do innego katalogu?

119

Jestem całkiem nowy w TypeScript i obecnie mam pliki .ts w kilku miejscach w strukturze mojego projektu:

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

Teraz, kiedy moje pliki są kompilowane, są one kompilowane w tym samym katalogu, w którym znajdują się pliki .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

Chociaż podoba mi się sposób, w jaki pliki .js zachowują tę samą strukturę katalogów co pliki .ts, nie chcę śledzić plików .js w moim VCS, więc chciałbym zachować wszystkie moje pliki JavaScript w oddzielne drzewo katalogów (które mogę następnie dodać do .gitignore), na przykład:

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

Czy jest gdzieś ustawienie lub opcja, która powie kompilatorowi TypeScript, aby to zrobił? Nie jestem też pewien, czy jest to istotne, ale używam WebStorm.

TheGuyWithTheFace
źródło
Myślę, że sprawy się komplikują, gdy masz konfigurację edytora / tsconfig / webpack config ... (tylko opowiadam o moim odczuciu ...)
Yarco

Odpowiedzi:

134

Użyj opcji --outDirna tsc (skonfigurowanej w File Watcher w IntelliJ)

Z dokumentacji wiersza poleceń

--outDir DIRECTORY Redirect output structure to the directory.

Edytować

Od wersji Typescript 1.5 można to również ustawić w tsconfig.jsonpliku:

"compilerOptions": {
    "outDir": "DIRECTORY"
    ...
Bruno Grieder
źródło
To jest dokładnie to, czego szukałem!
Wielkie
3
Uważam, że teraz możesz również użyć --rootDirflagi, aby przekazać wspólny folder główny do transpilera. Pozwala to uniknąć znalezienia wspólnego folderu głównego.
guzmonne
dlaczego ta opcja musi być systemem lub AMD? Nie chcę, aby kompilacja była od nich zależna.
Nikos
Tyle, że wydaje się, że to psuje w 2.0? stackoverflow.com/a/40149682/550975
Serj Sagan
2
Czy to nadal działa? Wydaje się, że nie działa podczas budowania za pomocą pakietu internetowego.
mattnedrich
30

Lub dodaj "outDir": "build"do pliku tsconfig.json

Qingshan
źródło
21
Uwaga: "outDir": "build"trafia do "compilerOptions"obiektu twojego tsconfig.json, a nie jako właściwość najwyższego poziomu.
Jamie
7

Chociaż te odpowiedzi są poprawne, powinieneś rozważyć, czy faktycznie chcesz ukryć pliki .js przed IDE .

W programie Visual Studio Code przejdź do File > Preferences > Settingslub .vscode\settings.jsonplik i wprowadź:

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

Powyższe ukrywa pliki .js, w których istnieje odpowiedni plik .ts.

Dave Clark
źródło
2
Wiem, że to pochodzi od jakiegoś czasu, ale byłem ciekawy, czy jest korzyść z nie używania folderów kompilacji, czy po prostu oferowałeś alternatywę?
theaceofthespade
1
@theaceofthespade Jest to przydatne, jeśli chcesz dołączyć lub odczytać pliki w folderze źródłowym względem __dirname. (Na przykład .graphqlplik schematu)
janispritzkau
3

Jeśli chcesz odwzorować strukturę katalogów folderu app / scripts w js, sugeruję użycie następujących ustawień dla twojego File Watch:

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
źródło
1
To rzeczywiście rozwiązuje problem z obserwatorem plików, ale skoro ta funkcja jest przestarzała i zastąpiona przez kompilator TypeScript, jak to się robi z kompilatorem?
Nitzan Tomer
3

Użytkownicy Intellij, kompilują Typescript do wielu katalogów wyjściowych

Dla użytkowników Intellij może to być przydatne. W ten sposób uruchomiłem to przy użyciu wbudowanego kompilatora Typescript.

Informacje o środowisku

Przykładowa struktura katalogów

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

Konfiguracja Intellij

  • Plik -> Ustawienia -> Maszynopis
  • Interpreter węzła: Twoja ścieżka instalacji NodeJS
  • Wersja kompilatora: zwykle znajduje się pod adresem C:\yourUserName\AppData\Roaming\npm\node_modules\typescript\lib
  • Opcje wiersza poleceń: -m amd -t ES6 -outDir E:\myapp\js
  • Sprawdź kompilację tylko głównego pliku i wskaż plik wejściowy. E:\myapp\ts\main.tsJeśli ta opcja nie jest zaznaczona, wszystkie pliki będą próbowały wyprowadzić dane do ścieżki outDir.

wprowadź opis obrazu tutaj

Kris Hollenbeck
źródło
3

Skonfigurowałem plik package.json w ten sposób, aby wpisywanie było npm run startwysyłane do build. Pliki źródłowe są przechowywane w plikach src. Plik wyjściowy jest określony przez --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"
  }
}

Możesz wykluczyć katalog kompilacji w tsconfig.json, chociaż prawdopodobnie nie jest to konieczne, ponieważ jest tam tylko JS:

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "build"
  ]
}
Josh
źródło
1

Używam Atom z rozszerzeniem atom-typescript, a mój plik tsconfig.json wygląda następująco:

{
  "compilerOptions": {
    "outDir":"js"
  }
}
Daveman
źródło
-1

Jeśli chodzi o Grunt, obecnie aby zapisać strukturę projektu folderu deweloperskiego w środowisku produkcyjnym i uniknąć nieoczekiwanego wyniku po skompilowaniu plików, zapoznaj się z opcją:

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

Zobacz rootDir opcję w oficjalnej dokumentacji grunt-ts.

Mam nadzieję, że pomoże to komuś, jeśli utknie i uzyska dziwny wynik w produkcji.

Vladislav Stuk
źródło