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

【问题标题】：External library reference works in Webpack but not in JSPM within Aurelia外部库引用在 Webpack 中有效，但在 Aurelia 中的 JSPM 中无效
【发布时间】：2016-10-04 19:34:56
【问题描述】：

我正在尝试在我的 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-template.js:1472attached@aurelia-templating.js:1026attached@aurelia-templating.js:1472(匿名函数)@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>

【问题讨论】：

完全可能的 jspm 无法正确导入。有时您必须添加 shims 或指定其主要入口点。
@MeirionHughes 我该怎么做呢？不确定 Shim 是什么。

标签： javascript datatable aurelia jspm

【解决方案1】：

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

解决方案在此链接。

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

索引.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>

欢迎.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" }
        ]
   });
  }
}

【讨论】：

【解决方案2】：

当您使用 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" }

        ]
    });
  }
}

希望这会有所帮助！

【讨论】：

谢谢，但我遇到了同样的问题。我清除了整个骨架并再次执行此操作，它仍然给了我 mytable.js:15 Uncaught (in promise) TypeError: $(...).DataTable is not a function(...)
我不确定，但我认为该方法是小写的。试试$(...).dataTable
不幸的是，“DataTables”或“dataTables”也是同样的问题。

【解决方案3】：

好像已经在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

【讨论】：

谢谢。我试图让这个例子工作（datatables.net/extensions/responsive/examples/styling/…）。这需要其他几个库。您提供的数据表链接将起作用，但我最终在与这些库相同的位置（因为它们不在 jspm 中）。我一直在尝试让 datatables.net 工作，因此我可以使用其他库重复该过程，以使此示例正常工作。我可以让常规的“数据表”工作，但不能让“datatables.net”工作。如果我使用“数据表”，当我需要其他依赖项时，我在同一条船上。
谢谢。所以我添加了这两个并查看它下载的内容我仍然缺少 1 个 js 文件依赖项。使用jspm install datatables，我得到jquery.dataTables.js，jspm install github:DataTables/Responsive 给了我dataTables.responsive.js 和responsive.bootstrap.js，但我仍然缺少dataTables.bootstrap.js 并挖掘这些链接，我看不到任何地方已经为@ 完成了覆盖987654332@。我只是不走运吗？没有它，我认为我链接的那个例子行不通。
是的，我怀疑你需要为它做一些覆盖（或者 datatables.net，如果这更容易的话）。 jspm 仍在开发中。我认为新的 0.17 版本（仍然是 beta）对 npm 模块加载有一些改进。
您能否提供一些有关如何创建覆盖的信息？
我找到了不必使用覆盖的解决方案。请参阅我发布的答案。