外部库引用在 Webpack 中有效，但在 Aurelia 中的 JSPM 中无效

Question

我正在尝试在我的 Aurelia 应用程序中使用 Datatables.net 库。

https://www.npmjs.com/package/datatables.net

问题在于以下代码适用于 Aurelia 的 Webpack 版本。 JSPM 构建我得到错误

mytable.js:13 Uncaught (in promise) TypeError: $(...).dataTable is not a function(…)attached @ mytable.js:13attached @ aurelia-templating.js:2947attached @ aurelia-templating.js:1016attached @ aurelia-templating.js:1472attached @ aurelia-templating.js:1026attached @ aurelia-templating.js:1472(anonymous function) @ aurelia-framework.js:204

我将 "datatables.net": "npm:datatables.net@^1.10.11", 添加到我的 package.json 并做了 jspm install -y 并且 datatables.net 说它已安装。

视图模型：

import $ from 'jquery';
import dataTable from 'datatables.net';
export class MyTable{
  dataSet = [
      ['Ken','Husband','Home'],
      ['Barbie','Wife','Home']
    ];
  attached(){

    //console.log(dataTable);
    var dataSet = this.dataSet;
    //console.log(dataSet);
    //require( 'datatables.net' )( window, $ );
    $(() =>     $('#example').DataTable({ 
        select: true,
        data: dataSet,
        columns: [
        { title: "Name" },
        { title: "Position" },
        { title: "Office" }

        ]
    }) );
  }
 }

查看

<template>
  <div class="container" style="margin-top:20px">
    <div>test datatables</div>
    <table id="example" class="display" width="100%"></table>
  </div>

</template>

Answer 1

当您使用 jspm 时，您不需要更改 package.json 中的任何内容。您应该使用 jspm 安装 javascript 库，如下所示：

jspm install npm:datatables.net

然后，你必须导入它，使用这个：

import $ from 'jquery';
import 'datatables.net';
export class MyTable{
  dataSet = [
      ['Ken','Husband','Home'],
      ['Barbie','Wife','Home']
    ];
  attached(){

    //console.log(dataTable);
    var dataSet = this.dataSet;
    $('#example').DataTable({ 
        select: true,
        data: dataSet,
        columns: [
        { title: "Name" },
        { title: "Position" },
        { title: "Office" }

        ]
    });
  }
}

希望对您有所帮助！

Answer 2

看起来它已经在 jspm 中设置好了：https://github.com/jspm/registry/blob/master/package-overrides/github/DataTables/DataTables@1.10.4.json

只需通过别名安装即可：

jspm install datatables

响应式也有覆盖：和https://github.com/jspm/registry/blob/master/package-overrides/github/DataTables/Responsive@1.0.4.json

但我认为您必须像这样安装它：

jspm install github:DataTables/Responsive@1.0.4

Answer 3

问题已解决。这完全取决于我如何将库添加到我的项目中，如何导入它们，以及 JSPM 加载库的方式的一个小问题（至少我认为对 Javascript 有更多经验的人可以纠正我） .

解决办法就在这里link。

https://github.com/aurelia/skeleton-navigation/issues/473

一个工作示例：

将以下库添加到您的项目

jspm install datatables.net=npm:datatables.net
jspm install datatables.net-responsive=npm:datatables.net-responsive
jspm install datatables.net-responsive-bs=npm:datatables.net-responsive-bs
jspm install datatables.net-bs=npm:datatables.net-bs

Index.html:

<html>
  <head>
    <title>Aurelia</title>
    <link rel="stylesheet" href="jspm_packages/npm/font-awesome@4.6.1/css/font-awesome.min.css">
    <link rel="stylesheet" href="styles/styles.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body aurelia-app="main">
    <div class="splash">
      <div class="message">Aurelia Navigation Skeleton</div>
      <i class="fa fa-spinner fa-spin"></i>
    </div>

    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
      // ensure jQuery is loaded and set before other imports in you project
      System.import('jquery')
        .then(jquery => {
          window.jQuery = jquery;
          window.$ = jquery;

          // now load and bootstrap aurelia
          return System.import('aurelia-bootstrapper');
        });
    </script>
  </body>
</html>

welcome.html:

<template>
  <section class="au-animate">
    <div class="container" style="margin-top:20px">
      <div>test datatables</div>
      <table id="example" class="table table-striped table-bordered dt-responsive nowrap" width="100%"></table>
    </div>
    </section>
</template>

welcome.js

import * as datatable from 'datatables';
//following only once in you app i think
import * as responsive from 'datatables.net-responsive';
import * as responsiveBs from 'datatables.net-responsive-bs';
import * as netBs from 'datatables.net-bs';

//This could be done an alternative way apparently (see below) but this is what worked for me. I have to give credit to the poster doktordirk on the github aurelia issue.
responsive.default(window, $)
responsiveBs.default(window, $)    
netBs.default(window, $)

//alternative method
//let responsive = responsive.default(); // to change settings?
//responsiveBs.default();
//netBs.default();

export class Welcome {
  dataSet = [
      ['Ken','Husband','Home'],
      ['Barbie','Wife','Home']
    ];

  attached() {
   // can call: responsive(settings, options);
    $('#example').DataTable({
       select: true,
       data: this.dataSet,
       columns: [
         { title: "Name" },
         { title: "Position" },
         { title: "Office" }
        ]
   });
  }
}

外部库引用在 Webpack 中有效，但在 Aurelia 中的 JSPM 中无效

External library reference works in Webpack but not in JSPM within Aurelia

javascript

datatable

aurelia

jspm