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

我有一个简单的带有Webpack的Typescript web应用程序，我正在尝试包含一个不导出任何模块/功能的应用程序。这些说明要求您添加一个脚本标记，这会将对象和函数添加到全局中，可以在整个应用程序中使用。我不想这样做，而是希望使用webpack将其捆绑到最终的javascript捆绑包中，并使其公开的对象和函数在globals中可用（因此它可以以预期的方式使用）

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

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

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

---

请问做这件事的正确方法是什么；DR：此库与js/ts模块系统不兼容。你必须修改它

---

它声称：

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

但它的方法是声明变量。当web浏览器通过

标记直接包含此文件时，此技术会创建全局变量

// 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

语句不再在全局范围内

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

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

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

---

我认为你最好的办法是修改这个库。只需在您想要使用的声明中添加一个

export

。例如，替换：

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

与

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

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

---

---

我也这么想。我真的不想编辑他们的软件包。也许我会让webpack打包并输出文件，我会直接在脚本标签中引用它