2017-01-10 81 views
0

我有一個打字稿項目,這個項目的結構不同於典型的Maven Java項目沒有組織。下面或多或少是項目結構的樣子。有沒有辦法重新排列TypeScript編譯器生成的JavaScript模塊?

 
. 
├── gulpfile.js 
├── index.html 
├── package.json 
├── src 
│   ├── entity 
│   │   ├── car.ts 
│   │   ├── animal.ts 
│   └── sevice 
│    ├── dao 
│    │   ├── cardao.ts 
│    │   ├── animaldao.ts 
│    └── validator 
│     ├── carvalidator.ts 
│     └── animalvalidator.ts 
├── test 
│   ├── entity 
│   │   ├── car.spec.ts 
│   │   ├── animal.spec.ts 
│   └── service 
│    └── dao 
│     ├── carvalidator.spec.ts 
│     └── animalvalidator.spec.ts 
├── tsconfig.json 
└── webpack.config.js 

我能夠生成一個*.js文件CommonJS的/的WebPack,系統和AMD。

  • 爲CommonJS的/的WebPack,我使用tsc + tsconfig.json然後webpack + webpack.config.js以生成單個文件,bundle.js
  • 對於系統,我只是用gulp-typescript任務模塊設置爲system來生成單個文件,lib-system.js
  • 對於amd,我再次使用gulp-typescript將模塊設置爲amd來生成單個文件,lib-amd.js

然而,當我這些單*.js文件加載到瀏覽器(帶的WebPack我只是用<script>標籤,並與其他我用SystemJS),我注意到,我有我的實例化對象如下。

var c = new car.Car('chevy', 'traverse', 2017); 
var a = new animal.Animal('cat'); 

我不喜歡我重複自己在代碼car.Caranimal.Animal的事實。有沒有一種方法來讓這個我可以做以下改變項目結構?

var c = new entity.Car('chevy', 'traverse', 2017); 
var a = new entity.Animal('cat'); 

當然我可以只創建一個文件,entity.ts在一個文件中定義兩個CarAnimal(或所有實體,其中有很多)。但是,對於我來說,讓一個長文件包含許多類只是爲了將這些模塊邏輯地組合起來似乎相當愚蠢。

我涉足所有*.ts文件天真地合併成一個超級ts文件,但並沒有真正的工作,因爲

  • 有很多進口的,你不得不將其刪除(我不「知道,如果gulp-concat能做到這一點的操作,或者如果我需要另一個包管道輸送到處理這樣做)
  • 子類必須超類後,被定義(如一飲而盡-CONCAT並不時關心這個規則把文本文件的)

所以我的問題是如果有可能在邏輯上組我的類(按功能,例如,實體,dao,驗證程序等)轉換爲模塊而不是默認分組(通過文件,一個文件實際上是一個模塊,我相信)?

我希望一些工具來做到這一點,還沒有找到任何解決辦法呢。

+0

爲什麼你在意瀏覽器中生成的代碼是怎麼樣的?難道你不會傳譯你的'Car'和'Animal'對象的實例嗎? – Bergi

回答

1

一種解決方案確實是從它創建用於分組,src/entity.ts的模塊,並且re-export類:

export { Car } from './entity/car'; 
export { Animal } from './entity/animal'; 

另一種可能性是使用rollup.js這似乎是能夠幾個編譯的模塊組合成一個,但它僅適用於javascript,我沒有任何經驗。

相關問題