为什么 AMD 加载器无法加载脚本？

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

// 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文件。

您的编译产生的文件包含这样定义的模块：

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

请注意define的第一个参数。这些是您的模块所在的名称。您的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>

相关内容

最新更新

热门标签：