In my TypeScript project, the structure resembles that of a typical Maven Java project. Here is an overview of how the project is organized:
*.js file for commonjs/webpack, system, and amd.
- For commonjs/webpack, I utilize
tscwithtsconfig.jsonand then usewebpackalong withwebpack.config.jsto generate the consolidated file, bundle.js. - For system module, I directly use the
gulp-typescripttask with the module set to system to create the single file, lib-system.js. - For amd module, again I employ
gulp-typescriptwith the module set to amd to generate the single file, lib-amd.js.
However, when I load these single *.js files into the browser (utilizing <script> tags with webpack and SystemJS for the others), I observe that I have to initialize my objects as shown below:
var c = new car.Car('chevy', 'traverse', 2017);
var a = new animal.Animal('cat');
It bothers me that I have to repeat car.Car or animal.Animal in the code. Is there a way to achieve the following without modifying the project structure?
var c = new entity.Car('chevy', 'traverse', 2017);
var a = new entity.Animal('cat');
Creating a file, entity.ts, and defining both Car and Animal in that file is a solution, but it seems inefficient to have a long file with numerous classes just for logical grouping.
I tried merging all the *.ts files into one uber ts file, but encountered issues with imports and class hierarchy. Therefore, I am looking for a way to logically group my classes by function (e.g., entity, dao, validator) into modules instead of the default file-based grouping.
I have yet to find any tools that can facilitate this process and would appreciate any suggestions or solutions.