javascript - 获取纯 JavaScript 文件以使用 TypeScript 模块系统

Question

我正在使用 Visual Studio 使用 TypeScript 创建一个 ASP.NET Core 2.2 Web 应用程序，并且我已经包含了 two.js图书馆以及 two.d.js (TypeScript 声明文件)来自我在网上找到的 npm 包。

问题是我不明白如何让模块工作(也许它与 two.js 无关，但通常使用带有模块的纯 JavaScript)。
two.js文件使用 JSDoc，但据我所知没有任何导出。

所以我的项目有这些文件( two.d.js ， two.js 和 site.ts ):

+ js
  - two.d.js
  - two.js
  - site.ts
  - something.ts

和 site.js文件正在导入 two.js和 something.ts一开始:

// this uses the 'two.d.js' file and I get intellisense
import { Two } from "./two";

// this is some .ts file
import { Something } from "./something";

// create the Two.js instance
let placeholder = document.getElementById('placeholder');

// this line is what I want to get running
let twojs = new Two({ width: 1900, height: 885 }).appendTo(placeholder);

然而，当 site.ts被编译，我尝试的任何模块选项在浏览器中失败:

“无” (即没有模块系统):失败，exports未在编译的 site.js 的第一行中定义文件:

 Object.defineProperty(exports, "__esModule", { value: true });

ES2015 native 模块系统:./something 失败，“404 not found”和 ./two .
TypeScript 编译器不附加 .js原生浏览器的扩展import声明，因此无法加载这些文件。但是，如果我在 TypeScript 中添加扩展名，则会出现编译错误。

AMD/RequireJS :我得到“Two 不是构造函数”异常。
代码被编译成这个，我可以看到所有 .js文件加载正确，但我猜问题是 two.js不本地导出任何内容:

define(["require", "exports", "./something", "./two"], function (require, exports, something, two_1) {

    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    let placeholder = document.getElementById('placeholder');

    // Two is not a constructor
    let twojs = new two_1.Two({ width: 1900, height: 885 }).appendTo(placeholder);

});

理想情况下，我希望每个页面都有一个捆绑的 .js 文件，以减少模块加载器服务器往返，但我对其他选项持开放态度。

Answer 1

two.js没有导出任何东西，它暴露了 Two作为全局变量，因此 two.d.ts在对模块进行类型注释时直截了本地是错误的(实际上 two.js 不符合“模块”的条件)。你需要先纠正它。

您需要替换所有顶级 export declare 的关键字two.d.ts 中的关键字.这会告诉 TS two.js不是模块，而是公开一些全局变量。

site.ts现在可以直接引用Two全局变量，不再有 import需要。作为一种好的做法，建议在此文件的顶部放置一个三斜杠指令以显示依赖关系。这也会把two.js的内容之前 site.js捆绑时(请参阅下一步)。

/// <reference path="./two.js" />

let twojs = new Two({ width: 1900, height: 885 }).appendTo(placeholder);

配置 tsconfig.json 如下。运行tsc在命令行中，它将编译和捆绑你所有的 .js和 .ts文件合并为一个文件。您可能需要根据项目的文件结构配置“include”(或“files”)字段以涵盖所有相关资源(例如 two.js、two.d.ts)。 Docs

{
    "include": [...],
    "compilerOptions": {
        "module": "amd",
        "outFile": "bundle.js",
        "allowJs": true  // to include `two.js` into the bundle
    }
}

使用 RequireJS 在 HTML 中包含您的脚本。

<script data-main="scripts/bundle" src="scripts/require.js"></script>