在 angular-cli 应用程序中使用外部库

Question

我想添加一个我创建的外部 javascript 库。我该怎么做？ 假设我有一个文件，converter.js

那个文件看起来像这样：

module.export = {
    myFunc: a=>a
}

然后我将它复制到./lib 文件夹中

然后在.angular-cli.json 我将这个条目添加到应用程序中： "scripts": ["../lib/converter.js"],

我可以在 html 文件的源代码中看到包含我的文件的 javascript 文件。好的。

但我不明白如何在 app.component.ts 中使用 myFunc...

就像医生说的那样

一旦通过脚本数组导入库，就不应导入 通过 TypeScript 代码中的 import 语句（例如 import * as $ 来自'jquery'；）。如果你这样做，你最终会得到两个不同的 库的副本：一份作为全局库导入，一份 作为模块导入。

...

如果您需要使用的全局库没有全局类型， 你也可以在 src/typings.d.ts 中手动声明它们为 any：

声明 var libraryName: any;

我做到了：declare var myFunc: any 在 src/typings.d.ts

什么都没有：试图调用 myFunc（作为全局）但它是未定义的。

谢谢

Answer 1

我认为您的声明是正确的，尽管我更喜欢declare var myFunc: (any) => any;。我看到你在你的库中使用了module.export，可能是为了在 node.js 中使用它的服务器端。这就是 SystemJS 模块加载器使用的语法。它用于旧的 Angular 教程。由于 Angular CLI 切换到 Webpack 作为模块加载器，我们不再需要它了。

尝试编写如下函数：

var myFunc = function (a) {
  return a;
}

您已选择将脚本添加到 .angular-cli.json 中的 "scripts" 数组。这显然有效。但我不喜欢在全局范围内声明函数。可能必须有更好的方法来导入库。按照 R. Richards 的建议，尝试使用 import 方式。