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

Question

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

该文件看起来像这样：

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

然后将其复制到./lib文件夹

中

然后在.angular-cli.json我将此条目添加到app： "scripts": ["../lib/converter.js"]，

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

但我不知道如何在app.component.ts中使用myFunc ...

就像医生说的那样

  

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

...

  

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

     

声明var libraryName：any;

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

没有任何东西：尝试调用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"数组中。这显然有效。但我不喜欢在全球范围内声明功能。可能必须有更好的导入库的方法。尝试使用import方式，而不是R. Richards建议。