如何使用 Typescript 和 Webpack 捆绑普通的 javascript 依赖项

Question

我有一个带有 Webpack 的简单 Typescript Web 应用程序，我正在尝试包含一个不导出任何模块/函数的普通 JavaScript 库。 这些说明要求您添加一个 Script 标签，这会将对象和函数添加到 Globals 中，这些对象和函数可以在整个应用程序中使用。 而不是这样做，我想使用 webpack 将它捆绑在最终的 javascript 包中，并使其公开的对象和函数在全局变量中可用（因此它可以以相同的方式使用）。

到目前为止，我可以让 webpack 在包中包含 javascript 的唯一方法是将以下内容添加到我的 index.ts 中：

require("./lib/exolve-m")

虽然这打包了 javascript，但它正在将它（应该如此）包装在一个公开导出的函数中。 然而，这个包不使用 export 关键字，而且它们也没有加载到全局命名空间中。 所以我留下了无法访问的捆绑代码。

请问这样做的正确方法是什么？

Answer 1

TL;DR：这个库与 js/ts 模块系统不兼容。 你将不得不修改它。

---

它声称如下：

 * The Exolve code creates only the following names at global scope:
 *
 * - Exolve
 * - createExolve
 * - createPuzzle (deprecated).
 * - exolvePuzzles

但它这样做的方式是在根文件范围内声明变量。 当 Web 浏览器通过<script>标签直接包含此文件时，此技术会创建全局变量。

// Run this in your browser console:
var foo = 123
console.log(window.foo) // returns: 123

这通常被认为是一种不好的做法，在像 Webpack 这样的打包工具之前，通常的做法是将您的代码包装在一个函数中以防止这种行为并避免污染全局范围。

(function() {
  var bar = 123;
  console.log(window.bar); // returns undefined
})()

但是，遗憾的是，这是 exolve 库依赖于这种创建全局变量的方法的行为。

---

但是，当您使用捆绑器时，这一切都会改变。 捆绑程序将所有导入的文件包装在可以调用以获取该文件内容的函数中。 这完全打破了这种创建全局变量的方法，因为var语句不再处于全局范围内。

因此，当您将其作为模块导入时，它会在该模块内部创建一堆局部变量，不导出任何内容，并且不修改全局范围。 所以根本没有办法访问库中的代码。

这意味着该库与作为模块导入不兼容。

---

我认为你最好的办法是修改图书馆。 只需将export添加到您要使用的声明即可。 例如，替换：

function Exolve(puzzleText,
                containerId="",
                customizer=null,
                addStateToUrl=true,
                visTop=0,
                maxDim=0)

和

export function Exolve(puzzleText,
                containerId="",
                customizer=null,
                addStateToUrl=true,
                visTop=0,
                maxDim=0)

现在您可以像导入任何其他模块一样导入项目：

import { Exolve } from "./exolve-m";

---

这里的工作示例