Question

我正在尝试添加仅通过CDN提供的第三方扩展程序。如何在Aurelia-CLI和/或Aurelia WebPack项目中添加它们？

我正在使用的库是DataTables，我通过添加以下内容修改了Aurelia-CLI文件，使其与aurelia.json一起使用：

{
  "name": "datatables",
  "path": "../node_modules/datatables/media",
  "main": "js/jquery.dataTables",
  "deps": ["jquery"],
  "exports": "$",
  "resources": [
    "css/jquery.dataTables.css"
  ]
},

然后在我的ViewModel

中

import $ from 'jquery';
import dataTable from 'datatables';

export class DataTableViewModel { 
  activate() {
      //bind your data here
  }
  attached() {
      $('#example').DataTable();
  }
}

但我现在面临的问题是添加样式扩展（DataTables Bootstrap 4 theme）。

我尝试在CDN内添加index.html，即使它没有出现任何错误，但它似乎也无法正常工作。

<body aurelia-app="main">
  <script src="scripts/vendor-bundle.js" data-main="aurelia-bootstrapper"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap4.min.js">
    </script>
</body>

我还尝试在aurelia.json配置文件中添加CDN，然后在paths中添加deps，但不是"paths": { "root": "src", "resources": "src/resources", "elements": "src/resources/elements", "attributes": "src/resources/attributes", "valueConverters": "src/resources/value-converters", "bindingBehaviors": "src/resources/binding-behaviors", "dataTablesBootstrap4": ["//cdn.datatables.net/1.10.13/js/dataTables.bootstrap4.min.js"] }, ... { "name": "datatables", "path": "../node_modules/datatables/media", "main": "js/jquery.dataTables", "deps": ["jquery", "dataTablesBootstrap4"], "exports": "$", "resources": [ "css/jquery.dataTables.css" ] },似乎也有用。

Aurelia-CLI

有什么建议吗？

修改

我刚发现这可能与CDN issue #313相关，可能意味着目前无法导入fonts。

Answer 1

因为捆绑包不会被延迟加载并且无论如何都被集中到同一个包中，所以您只需将CDN脚本添加到index.html文件中即可实现相同的功能。或者您可以根据需要将脚本插入到您需要的页面中（假装延迟加载）。

如何使用Aurelia-CLI和RequireJS添加CDN

1 个答案: