使用 Rollup.js 的问题

Question

我正在学习 TypeScript，想使用 export/import 机制。我有 3 个 .ts 文件，代码如下所示：

1) MyClass.ts:

/// <reference path="../Scripts/jquery.d.ts" />
/// <reference path="../Scripts/dx.all.d.ts" />
/// <reference path="../Scripts/go.d.ts" />

export class MyClass {
    render(divId: string, text: string): void {
        ...
    }
    getData(): void {
        ...
    }
}

2) Caller.ts:

import { MyClass } from './MyClass';

export class Caller {
    execute() {
        let myClass: MyClass = new MyClass();
        myClass.render("content", "Hello World");
        myClass.getData();
    }
}

3) Main.ts:

import { Caller } from './Caller';

window.onload = () => {
    let caller: Caller = new Caller();
    caller.execute();
};

4) HTML:

<script src="~/Scripts/MyClass.js"></script>
<script src="~/Scripts/Caller.js"></script>>
<script src="~/Scripts/Main.js"></script>

5) tsconfig.json:

{
    "compilerOptions": {
        "noImplicitAny": false,
        "noEmitOnError": true,
        "removeComments": false,
        "sourceMap": true,
        "target": "es5",
        "outDir": "../Scripts",
        "allowSyntheticDefaultImports": true,
        "lib": [ "es2015", "dom" ],
        "module": "commonjs"
    },
    "exclude": [
        "node_modules",
        "wwwroot"
    ]
}

据我所知，最后一步是使用一些模块加载器或模块捆绑器。我选择了模块捆绑器 Rollup.js。同样，据我所知，Rollaup.js 应该会生成一个包含我编写的所有 TypeScript (JavaScript) 代码的捆绑文件。是吗？

如果是这样，我已经下载 Rollup.js 并转到我的 MVC 5 Web 应用程序的脚本子文件夹，其中包含所有 .ts、.d.ts、.js 和其他文件。我也在我的 TypeScript 代码 JQuery、DevExtreme 和 GoJS JavaScript 库中使用。

之后我使用以下 Rollup 命令：

rollup Main.js -o bundle.js -f cjs

我知道 Main.js 文件是入口点，Rollup 将自动解析 export/import 依赖项并创建 1 个输出 bundle.js 文件，我可以在 HTML代码：

<script src="~/Scripts/bundle.js"></script>

创建了bundle.js文件，但是除了Main.js文件的内容外什么都没有。所以，这样我的应用程序什么都不显示。

我在此处显示的代码仅用于演示问题，实际代码更为复杂。

我做错了什么？

Answer 1

尝试使用 rollup-plugin-typescript rather than pre-compiling your .ts files — here's an example config。（要使用配置文件，运行 rollup -c。）

使用 Rollup.js 的问题

The issue with using Rollup.js

typescript

rollupjs