在 Aurelia 中使用无 NPM 模块答案

【问题标题】：Using none NPM modules with Aurelia在 Aurelia 中使用无 NPM 模块
【发布时间】：2017-01-19 23:33:48
【问题描述】：

我需要将Squareup 支付平台集成到我的应用程序中。他们有一个 javascript 库，需要从他们的 cdn 中使用。 https://docs.connect.squareup.com/articles/adding-payment-form/

我希望能够在我的 Typescript 类中使用这个库。问题是因为我无法导入它，因为它不是一个模块，当我尝试使用它时会遇到错误：

我已将<script type="text/javascript" src="https://js.squareup.com/v2/paymentform"></script> 添加到我的index.html

activate(params) {
    SqPaymentForm({});
}

会产生error TS2304: Cannot find name 'SqPaymentForm' 错误。我怎样才能解决这个问题？我知道我可以在我的 HTML 文件中做所有事情来解决这个问题，但这显然不是我想要采取的路线。

更新：我尝试将其添加到 aurelia.json 文件中：

{
  "name": "paymentform",
  "path": "https://js.squareup.com/v2/paymentform",
  "exports": "SqPaymentForm"
},

但是，由于 Aurelia 会自动将 .js 附加到文件末尾，因此会破坏 url，因为其 js 文件的方形 url 不以 .js https://js.squareup.com/v2/paymentform 结尾。

【问题讨论】：

标签： typescript aurelia

【解决方案1】：

查看Aurelia CLI Documentation。特别是有关导入旧库的部分（在这种情况下，如果您的库不是模块化的，则需要遵循这些步骤）。

早于模块系统的库可能会很痛苦，因为它们通常依赖于必须在库之前加载的全局脚本。这些库还添加了自己的全局变量。一个这样的库的一个例子是 bootstrap 。让我们看看如何处理这样的遗留库。

遗留库依赖项 ES 下一个

"dependencies": [
  "jquery",
    {
      "name": "bootstrap",
      "path": "../node_modules/bootstrap/dist",
      "main": "js/bootstrap.min",
      "deps": ["jquery"],
      "exports": "$"
    }
  ]

name - 这是库的名称，您将在 JavaScript 或 TypeScript 代码中导入它。

path - 这是包源所在文件夹的路径。此路径相对于您的应用程序的 src 文件夹。

main - 这是包的主模块（入口点），相对于路径。您不应包含文件扩展名。 .js 将自动附加。

deps - 这是一组依赖项，必须在评估旧库之前加载并可用。

exports - 这是应该用作模块导出值的全局变量的名称。

在您的情况下，您必须将路径指向非 npm 模块，而不是 node_modules 文件夹中的内容。

更新：

截至目前，CLI 不支持以您需要的方式添加依赖项（没有 .js 扩展名）。但是，如果不需要真正的依赖项，您可以添加一个脚本标签来自己加载模块。
您应该可以通过添加脚本来做到这一点

<script type="text/javascript" src="https://js.squareup.com/v2/paymentform"></script>

到<head> 标记中的index.html，这样它会在加载正文之前加载，您需要在app.js 中使用它。当您在视图模型中的任何位置访问它时，您可能必须使用 window.SqPaymentForm 或从该库中导出的任何变量名称来访问它。

话虽如此，我将尝试在 CLI 中获取 PR 以使修订号正常工作，当我在那里时，我会看看是否可以添加此用例。
同时，您可以向引用此问题的Aurelia CLI repo 添加功能请求。

【讨论】：

更新了我的问题
没有忘记你 :) 现在调查一下。
抱歉坏消息。更新了答案。 TL;DR，您现在无法通过捆绑程序执行此操作，您必须将脚本标签添加到 index.html。但我会看看我是否不能尽快完成工作。
感谢您的帮助！我已经在我的index.html 文件中添加了方形 javascript src，并且收到了找不到它的错误。这是打字稿问题还是只是 aurelia 让我知道它不知道我从哪里获取该变量？
你是怎么添加到索引文件中的？