Question

我需要将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附加到文件的末尾，因此它会破坏网址，因为其js文件的方形网址不会以.js https://js.squareup.com/v2/paymentform结尾。

Answer 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>

到index.html标记中的<head>，这是在加载正文之前加载的方式，您需要app.js中的window.SqPaymentForm。当您在视图模型中的任何位置访问它时，您可能必须使用string name = "BtnAction"; MethodInfo m = t.GetMethod(name);访问它，或者从该库中导出的变量名称。

话虽这么说，我将尝试在CLI中尝试使用PR来修改号码，而我在那里时，我会看看是否可以添加此用例。
与此同时，您可以向引用此问题的Aurelia CLI repo添加功能请求。

在Aurelia中使用无NPM模块

1 个答案:

更新