javascript - 有没有办法重新排列 TypeScript 编译器生成的 JavaScript 模块?

标签 javascript typescript webpack systemjs commonjs

我有一个 TypeScript 项目,项目结构的组织方式与典型的 Maven Java 项目没有什么不同。下面是项目结构的大致样子。

.
├── 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

I am able to generate a single *.js file for commonjs/webpack, system, and amd.

  • for commonjs/webpack, I use tsc + tsconfig.json and then webpack + webpack.config.js to generate a single file, bundle.js.
  • for system, I simply use the gulp-typescript task with module set to system to generate a single file, lib-system.js.
  • for amd, again, I use gulp-typescript with module set to amd to generate a single file, lib-amd.js.

However, after I load these single *.js files into the browser (with webpack I just use <script> tags and with the other I use SystemJS), I noticed that I have to instantiate my objects as follows.

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 文件合并到一个 uber ts 文件中,但这并没有真正起作用,因为

  • 有很多导入,你必须删除它们(我不知道 gulp-concat 是否可以执行此操作,或者我是否需要将另一个包通过管道传输到进程中来执行此操作所以)
  • 子类必须在父类(super class)之后定义(因为 gulp-concat 在连接文件时不关心此规则)

所以我的问题是是否可以将我的类(按功能,例如实体、dao、验证器等)逻辑分组为模块,而不是默认分组(按文件,一个文件实际上是一个模块,我相信)?

我希望有一些工具可以实现这一点,但尚未找到任何解决方案。

最佳答案

一个解决方案确实是创建一个用于分组的模块,src/entity.tsre-export其中的类:

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

另一种可能性是使用 rollup.js它似乎能够将多个已编译的模块合并为一个,但它仅适用于 javascript,我对此没有任何经验。

关于javascript - 有没有办法重新排列 TypeScript 编译器生成的 JavaScript 模块?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41560469/

相关文章:

Leaflet map 事件上的Angular 7变量访问问题

node.js - Node SASS 的 React JS Webpack 失败

javascript - 如何将 babel 与 webpack 一起使用以实现 ie11 兼容性

javascript - 如何限制 javascript/Angular 中第一个位置的空间

javascript - 使用 jQuery 的 ajax 调用速度慢得令人痛苦

javascript - 如何处理 React 中动态创建的受控输入?

symfony - Webpack Encore - $ 未定义

javascript - Chrome JS 控制台 ("$x(...)"中的 XPath 搜索)输出数组(jQuery 对象?)而不是 HTML 文本部分(DOM 元素?)

angular - 以理智的方式在 NGXS 中声明状态

typescript - 在 typescript 中写一个类型安全的 'pick' 函数