修复

Question

我正在使用typescript和requirejs。我想将我的库代码导入为模块，以避免使所有内容成为环境全局。我的问题是，在打字稿文件中使用导入或导出会将整个文件转换为模块。对于我的应用程序代码，这意味着它不能直接调用。

这是一个示例应用程序。

的index.html

<!DOCTYPE html>
<html>
    <head>
        <title>My Test App</title>
        <script src="require.js"></script>
        <script src="app1.js"></script>
        <script src="app2.js"></script>
    </head>
</html>

tsconfig.json

{
    "compilerOptions": {
        "module": "amd",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": false
    }
}

greeter.ts

export function greet(name: string) {
    alert(`Hello ${name}`);
}

app1.ts

import { greet } from './greeter';
greet('alice');

app2.ts

import { greet } from './greeter';
greet('bob');

tsc运行没有问题，但这是我得到的一个文件作为输出。

tsc输出：app1.js

define(["require", "exports", './greeter'], function (require, exports, greeter_1) {
    "use strict";
    greeter_1.greet('alice');
});

这不起作用。来自require.js

确保通过RequireJS API加载调用define（）的所有脚本。不要在HTML中手动编写脚本标记以加载具有的脚本 define（）调用它们。

那么如何说服打字稿编译器在没有define()调用的情况下生成输出。在app1.ts中，我不打算定义一个模块，只是使用其他模块。 require()似乎更合适。有没有办法让import编译成require()？

Answer 1

如果您有一个模块启动需要为您的网页加载的所有内容，则可以使用data-main。如果您需要使用多个模块启动加载，请使用require加载模块：

<script src="require.js"></script>
<script>
  require(["app1", "app2"]);
</script>

您可能习惯于将单个字符串参数传递给require，但这是AMD。本机AMD require将一组依赖项作为第一个参数，将可选回调作为第二个参数。

如果您使用的是require.config，则可以将deps选项用于相同目的：

<script src="require.js"></script>
<script>
  require.config({
    // You could have more config here... in addition to:
    deps: ["app1", "app2"]
  });
</script>

目前无法让tsc输出require而不是define。我不会屏住呼吸等待添加这样的功能，因为有很多方法可以获得这样一个功能允许的相同结果。

Answer 2

修复

来自您已找到的文档：

确保通过RequireJS API加载调用define（）的所有脚本。

同样来自文档开始页面：http://requirejs.org/docs/start.html

并且只引用带有requirejs调用的require.js来加载你的脚本：

<script data-main="scripts/main" src="scripts/require.js"></script>

^这是应加载应用程序入口点的script标记。

我可以使用requirejs在typescript代码中加载模块吗？