使用 Rollup.js 的问题答案

【问题标题】：The issue with using Rollup.js使用 Rollup.js 的问题
【发布时间】：2017-12-08 21:54:45
【问题描述】：

我正在学习 TypeScript，想使用导出/导入机制。我有 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 应用程序的 Scripts 子文件夹，其中所有 .ts、.d.ts、.js 和其他文件。我也在我的 TypeScript 代码中使用 JQuery、DevExtreme 和 GoJS JavaScript 库。

之后我使用以下汇总命令：

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

我知道 Main.js 文件是入口点，Rollup 将自动解析导出/导入依赖项并创建 1 个输出 bundle.js 文件，我可以在 HTML 代码中以这种方式使用：

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

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

我在这里展示的代码只是为了展示问题的目的，真正的代码更复杂。

我做错了什么？

【问题讨论】：

与此同时，我已经弄清楚如何使用 webpack 创建单个 bundle.js 文件，但如果有人可以帮助处理 Rollup.js，我将离开这篇文章。

标签： typescript rollupjs

【解决方案1】：

尝试使用 rollup-plugin-typescript 而不是预编译您的 .ts 文件 — here's an example config。（要使用配置文件，请运行rollup -c。）

【讨论】：