离子无法导入全局库

Question

我创建了一个使用 Webpack 捆绑的纯 Javascript 库（不依赖于 Angular 或 Ionic 等其他框架）。它是捆绑在一起的，因此所有功能都导出到窗口对象。

现在我想在 Ionic 应用程序中使用这个库。在我的代码中，我像这样导入库：

import * as MyLibrary from "my-library"

这似乎可以工作，因为我的代码编辑器可以识别导入（甚至获取 Typescript 类型）。使用ionic build 构建项目时，不会出现编译错误。

但是，当我在浏览器中运行该项目时，我遇到了问题。当我记录导入的库时，它显示一个没有任何导出类和方法的空对象。

import * as MyLibrary from "my-library"
console.log(MyLibrary); // This results in an empty object e.g. {}

实际上这会导致我的所有代码都失败，因为它会尝试调用空对象上的方法。

但是，当我在 Chrome 调试器控制台中键入 MyLibrary 时，它确实显示库已加载。

Ionic 无法加载这类全局库吗？

Answer 1

听起来 Webpack 生成的 my-library 模块没有任何导出，而是在加载时在窗口上创建了一个 MyLibrary 全局变量。如果是这种情况，那么不要从模块中导入 MyLibrary（并隐藏全局变量），而应该只导入模块以获得其副作用，然后使用 MyLibrary 全局变量：

import "my-library"
console.log(MyLibrary);  // This should show you the same thing you saw in the Chrome console.

这可能会弄乱您的类型信息。如果 TypeScript 当前认为该模块是以名称 my-library 声明的，则将以下舞蹈添加到项目中的新 .d.ts 文件中，以将该模块别名为全局 MyLibrary 变量：

declare module "dummy" {
  import * as MyLibrary_ from "my-library";
  global {
    namespace Dummy {
      export import MyLibrary = MyLibrary_;
    }
  }
}
import MyLibrary = Dummy.MyLibrary;

（有关背景信息，请参阅this issue。）

除了使用上述解决方法之外，更改 my-library 的捆绑方式以便它具有导出而不是定义全局变量可能会更容易混淆。