使用 HTML <script> 标签加载转译的 TS2？答案

【问题标题】：Load transpiled TS2 with HTML <script> tag?使用 HTML <script> 标签加载转译的 TS2？
【发布时间】：2017-07-26 07:05:34
【问题描述】：

我真的是 Typescript2 的新手。我很喜欢它并编写了一个模块，我可以轻松地在其他 Typescript2 项目中导入和使用它。但我也希望我的库能够通过简单地使用 HTML 标记来独立使用。但是，当我这样做时，浏览器会抱怨“导出未定义”。

我猜我必须编写某种 javascript 来导入我的模块并实例化它，然后让我的浏览器加载该包装脚本。我在正确的轨道上吗？如何创建一个打字稿，转译成我可以在浏览器中本地加载的内容，并带有一个只加载和实例化的脚本标签？

【问题讨论】：

【解决方案1】：

你在正确的轨道上。你需要的是一个模块加载器。对于浏览器，typescript documentation 中提到了 requirejs，虽然有几个选项（requirejs、browserify、webpack、rollup）。

我在 typescript 中使用 requirejs，所以我有执行以下步骤的经验：

对于 requirejs，您可以执行以下操作来开始。

确保在使用 typescript 配置文件或命令行compiler option arguments 运行 typescript 编译器命令 (tsc) 时编译为 AMD 格式的模块
```
// tsconfig.json
{
    "compilerOptions": {
        "module": "amd"
    }
}
```
获取requirejs
- 一个来源是http://requirejs.org/docs/download.html
记下由 typescript 编译器输出的 .js 文件的名称
- 例如“my-script.js”
向页面添加脚本标签
- 例如<script data-main="scripts/my-script" src="require.js"></script>

requirejs http://requirejs.org/docs/start.html有一个简单的“入门”页面

作为奖励，要将多个模块导出到单个文件，您可以使用 --outFile 编译器选项用于 typescript。

【讨论】：