TypeScript + RequireJs + 其他库 (pdfjs)答案

【问题标题】：TypeScript + RequireJs + other libraries (pdfjs)TypeScript + RequireJs + 其他库 (pdfjs)
【发布时间】：2019-11-18 04:16:45
【问题描述】：

我正在尝试将 TypeScript 集成到一个相当新的项目中，其中包含一些库。为了支持旧版浏览器，我决定以ES5 为目标。我选择了模块系统AMD，因为它是去前端的。

我的test.ts 文件使用了 3 个库，我导入了这些库，以便 TypeScript 可以使用这些库并正常编译：

import * as $ from "jquery";
import * as ko from "knockout";
import * as pdfjsLib from "pdfjs-dist";

export var MyViewModel = function (this: any, initUrl: string) {
  var self = this;
  self.UrlValue= ko.observable(initUrl);

  self.UrlValue.subscribe(function (newValue: string) {
    self.showPdfPreview(newValue);
  });

  self.showPdfPreview = function (url: string) {
    var loadingTask = pdfjsLib.getDocument(url);
    ...
  }
}

TypeScript 使用此导入将其编译为 test.js：

define(["require", "exports", "jquery", "knockout", "pdfjs-dist"], function (require, exports, $, ko, pdfjsLib) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });

如果我尝试使用它，我会收到此错误：TypeError: pdfjsLib is undefined 我该如何解决这个问题？

RequireJs 基本上是这样配置的：

<script src="~/lib/requirejs/dist/require.js"></script>
<script>
    require.config({
        baseUrl: "/",
        paths: {
            "jquery": "lib/jquery/dist/jquery-3.4.1",
            "knockout": "lib/knockout/dist/knockout-3.5.0",
            "pdfjs-dist": "lib/pdfjs/dist/build/pdf",
            "mytest": "js/test"
        },
        waitSeconds: 15
    });
    require(
        ["jquery", "knockout", "pdfjs-dist", "mytest"],
        function ($, ko, pdfjsLib, mytest) {
            var viewModel = new mytest.MyViewModel("@Model.Value");
            ko.applyBindings(viewModel);
        }
    );
</script>

我假设我必须需要test.ts 中的 pdfjsLib。我不能像那样使用 require ，因为 TypeScript 不知道定义。在那里导入库也不起作用，TS 说它不是模块。我觉得我错过了什么。

【问题讨论】：

标签： typescript requirejs pdfjs

【解决方案1】：

必须针对面向 ES5 的 TypeScript 更改导入。同样由于某种原因， pdfjs 别名需要与 pdfjs 模块的路径相同。就我而言，这是pdfjs-dist/build/pdf。所以导入现在看起来像这样：

/// <reference path="../TypeScript/@types/knockout/index.d.ts" />
import $ = require("jquery");
import pdfjsLib = require("pdfjs-dist/build/pdf");

不建议使用参考，但我还没有找到可行的替代方法。

RequireJs 配置必须更改为：

<script src="~/lib/requirejs/dist/require.js"></script>
<script>
    require.config({
        baseUrl: "/",
        paths: {
            "jquery": "lib/jquery/dist/jquery-3.4.1",
            "knockout": "lib/knockout/dist/knockout-3.5.0",
            "pdfjs-dist/build/pdf": "lib/pdfjs/dist/build/pdf",
            'pdfjs-dist/build/pdf.worker': "lib/pdfjs/dist/build/pdf.worker",
            "mytest": "js/test"
        },
        waitSeconds: 15
    });
    require(
        ["knockout", "mytest"],
        function (ko, mytest) {
            var viewModel = new mytest.MyViewModel("@Model.Value");
            ko.applyBindings(viewModel);
        }
    );
</script>

【讨论】：