为什么 amd loader 不能加载脚本？

Question

我正在尝试使模块代码工作。到目前为止，我有以下代码：

// third_party/test/Test.ts
export function test():void
{
    console.log("QWERTY");
}

// Main.ts
// import {test} from "./third_party/test/Test"
require([], function () {
    console.log("Loaded");
}

// index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <script data-main="build/library" type="text/javascript" src="scripts/third_party/require/require.js"></script>
    </head>
</html>

// tsconfig.json
{
    "compilerOptions": {
        "target": "es5",
        "module": "amd",
        "sourceMap": true,
        "outFile": "build/library.js"
    }
}

请注意 Main.ts 中注释的 import 语句。此代码按预期工作 - 我可以看到输出消息。但是，一旦我在 Main.ts 中取消注释 import，我就什么也看不到了。没有错误或警告。

因为我使用的是 outFile 编译器选项，所以我只有一个 js 文件。

Answer 1

您编译生成的文件包含如下定义的模块：

define("third_party/test/Test", ["require", "exports"], function (require, exports) {
// ...
define("Main", ["require", "exports"], function (require, exports) {
// ...

注意 define 的第一个参数。这些是 RequireJS 已知的模块名称。您的 data-main 请求名为 build/library 的模块。 您的包中没有此名称的模块。

您需要让 RequireJS 加载 Main。这是一个简单的方法：

<!DOCTYPE html>
<html lang="en">
    <head>
      <script type="text/javascript" src="node_modules/requirejs/require.js"></script>
      <script>
        require.config({
          // All modules are under the "build" path.
          baseUrl: "build",
          // The "library" bundle contains the module "Main" so when
          // "Main" is requested, look for it in "library". 
          bundles: {
            "library": ["Main"],
          },
        });
        require(["Main"]);
      </script>
    </head>
</html>

为什么 amd loader 不能加载脚本？

Why can't amd loader load a script?

requirejs

typescript