TypeScript + RequireJs + другие библиотеки (pdfjs) - PullRequest
Новая
       29

TypeScript + RequireJs + другие библиотеки (pdfjs)

0 голосов
/ 08 июля 2019

Я пытаюсь интегрировать 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>

Я предполагаю, что мне требуется pdfjsLib в test.ts.Я не могу использовать require там просто так, хотя, так как TypeScript не знает определения.Импорт библиотеки там тоже не работает, TS говорит, что это не модуль.Я чувствую, что что-то упустил.

1 Ответ

0 голосов
/ 10 июля 2019

Импорт должен был быть изменен для таргетинга на TypeScript ES5. Также по какой-то причине псевдоним 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>
...