typescript - TypeScript + RequireJs + 其他库 (pdfjs)
问题描述
我正在尝试将 TypeScript 与一些库集成到一个相当新的项目中。为了支持旧浏览器,我决定将ES5
. 我选择了 module system 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);
...
}
}
test.js
TypeScript使用此导入将其编译为:
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
. 我不能像那样使用 require ,因为 TypeScript 不知道定义。在那里导入库也不起作用,TS 说它不是模块。我觉得我错过了什么。
解决方案
必须为针对 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>