首页 文章

如何使用AMD模块运行编译为单个文件的TypeScript应用程序？

提问于
浏览 次
11

我在这里遗漏了一些完全无足轻重的东西，但是对于它的生命我无法弄明白 . 直到最近我才开始使用AMD（RequireJS） . 我的应用程序将（将）在浏览器中运行 .

设置

在TypeScript 1.8中，当使用AMD时，它是possible到 tsc 整个项目由外部模块组成一个输出文件 .

出于这个原因，我最终决定抛弃内部模块并将所有VS2015项目 .ts 和 .tsx 文件外部模块，然后使用以下编译器参数将它们编译为单个文件：

--module AMD --outFile main.js

输出

单个输出main.js文件按预期创建，其中列出了属于项目一部分的所有模块：

main.js

define("Project/MainModule", ["require", "exports" ...], function (require, exports ...) {
    "use strict";
    console.log("MainModule defined");
    // ...
});

...

用法（？）

现在，如何让 Project/MainModule 从 - 例如 - index.html运行（以便将"MainModule defined"记录到控制台中）？我加载了RequireJS来处理AMD语法，以及为立即加载指定的main.js文件：

index.html

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

这正确加载 main.js ，我通过在该文件中的大量定义列表（外部模块）之后包含对 console.log 的调用来确保 . 请原谅我，如果这是一个微不足道的问题，我找不到任何关于如何使用这种方法的编译应用程序（也许我没有使用正确的keywords？） .

编辑：我尝试按名称要求模块：

index.html

<script>
    window.onload = function () {
        require(["Project/MainModule"], function () {
            // this
        });
    }
</script>

......但这并不好，RequireJS无法找到该模块 .

typescript amd

3 回答

  • 1

    您应该通过脚本标记加载构建的文件：

    <head>
    <script src="bower_components/dojo/dojo.js"></script>
    <script src="built/run.js"></script>
</head>

    然后你可以使用require加载模块：

    <body>
    <script>require(["app"], run => run());</script>
</body>

    tsconfig.json：

    {
    "compilerOptions": {
        "declaration": false,
        "module": "amd",
        "target": "es5",
        "noImplicitAny": true,
        "sourceMap": false,
        "out": "./built/run.js",
        "moduleResolution": "node"
    },
    "exclude": [
        "bower_components"
    ]
}

    有关工作示例，请参阅https://github.com/ca0v/ags-lab/blob/master/index.html .

    或者，您可以使用data-main加载requirejs配置 . 该配置可以将构建的脚本指定为依赖项 . 例如：

    requirejs.config({
    paths: {
        "openlayers": "bower_components/ol3/ol",
        "jquery": "bower_components/jquery/dist/jquery.min"
    },
    deps: ["built/run"],
    callback: () => {
        requirejs(["app"], run => run());
    }
});

    并使用data-main加载它：

    <head>
    <script src="bower_components/requirejs/require.js" data-main="config.js"></script>
</head>

    见https://github.com/ca0v/ol3-lab/blob/master/index.html

    回复于
  • 2

    TypeScript编译器仅生成 define 调用 . 要触发模块加载，您至少需要一个顶级 require 调用 .

    当使用RequireJS的 r.js 进行捆绑时，由于这个原因，很好option .

    不知道如何使用 --outFile 来实现这一目标 . 我相信您需要在 .ts 或 .js 中直接使用RequireJS API，就像在 index.html 中一样 . 只需拨打_1181656就足够了 .

    这就是为什么你不使用r.js，browserify或webpack的解决方案？

    回复于
  • 5

    对于高级RequireJS用户来说，这确实是一个微不足道的错误 .

    使用AMD语法编译时创建的模块定义和 --outFile 被命名为模块，according to RequireJS .

    要使用命名模块，必须通过将模块名称映射到模块路径来在RequireJS配置中定义它 . 在这种情况下，我们需要定义命名模块 Project/MainModule 在模块（文件） main 中：

    index.html

    <script>
    require.config({
        paths: {
            "Project/MainModule": "main"
        }
    });
</script>

    然后按名称要求模块，现在可以从分配给它的文件中查找：

    index.html

    <script>
    require(["Project/MainModule"], function () {
        console.log("app loaded");
    });
</script>

    Note ：包含Require.js时必须省略 data-main 属性，否则模块将被加载两次（或者，至少上面的示例记录了两次） .

    Note 2 ：这只是完整解决方案的一部分 . 必须为TypeScript编译器发出的所有模块指定 module -> file 映射，这根本不可行 . 但是，此相关问题适用于answer .

    回复于

相关问题