我有一个带有 Webpack 的简单 Typescript Web 应用程序，我正在尝试包含一个不导出任何模块/功能的 plain javascript library。说明要求您添加一个脚本标签，这会将对象和函数添加到可在整个应用程序中使用的全局变量中。而不是这样做，我想使用 webpack 将其捆绑到最终的 javascript 包中，并使其公开的对象和函数在全局变量中可用（因此可以以相同的方式使用它）。
到目前为止，我能让 webpack 在包中包含 javascript 的唯一方法是将以下内容添加到我的 index.ts 中：
require("./lib/exolve-m")
虽然这会打包 javascript，但它会将其（应该如此）包装在一个公开导出的函数中。然而，这个包不使用 export 关键字，而且它们也没有加载到全局命名空间中。所以我留下了无法访问的捆绑代码。
请问这样做的正确方法是什么？
【问题讨论】：
标签： javascript typescript webpack
TL;DR：此库与 js/ts 模块系统不兼容。您将不得不对其进行修改。
它声称以下内容：
* The Exolve code creates only the following names at global scope:
*
* - Exolve
* - createExolve
* - createPuzzle (deprecated).
* - exolvePuzzles
但是这样做的方式是声明变量at the root file scope. 当网络浏览器通过<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";
【讨论】：