Question

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

现在，我想在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的捆绑方式，以使其具有导出而不是定义全局变量，这样可能会减少混淆。

Ionic无法导入全局库

1 个答案: