将 PivotTable.js 与 aurelia 和 asp.net 核心一起使用

Question

我的项目是基于 ASP.Net Core 和 aurelia 设置的，如 Rob Eisenberg https://channel9.msdn.com/Events/Build/2017/T6032 的这段视频中所示

现在我正在尝试使用 PivotTable.js 插件。 它有一个示例函数：

$(function () {
  $("#output").pivot(
    [
      { color: "blue", shape: "circle" },
      { color: "red", shape: "triangle" }
    ],
    {
      rows: ["color"],
      cols: ["shape"]
    }
  );
});

我首先在一个带有内联脚本标签的简单 html 页面中尝试了它，它运行良好。 在 aurelia 项目中，我将它包装在一个 load() 函数中，该函数在单击按钮时触发：

//playground.html
<button id="btn1" click.trigger="load()">Load</button>
<div id="output"></div>

............

//playground.ts
import $ from 'jquery'

export class Playground {
   load() {
    $(function () {
        $('#output').pivot(
    ...
   }
 }

我用 npm 安装了它，现在看起来我在正确引用它时遇到了问题。我直接在我的视图模型的脚本标签中进行了测试

     <script type="text/javascript" src="pivot.js"></script> 

它不断抛出“pivot is not a function”错误，如下所示：

    jQuery.Deferred exception: __WEBPACK_IMPORTED_MODULE_0_jquery___default(...)(...).pivot is not a function app/components/play/playground/Playground.prototype.load/<@http://localhost:63822/dist/app.js?v=Co4Zys-nKtxDfRHuYeQtAcAzgXG9rRHqPqkwN0CzgJQ:27236:13

   mightThrow@http://localhost:63822    /dist/vendor.js?v=8kh55HdjmafGVyQfWaHURccoz4Vi-HAb9obSOc7CDCk:14851:21

     resolve/</process<@http://localhost:63822/dist/vendor.js?v=8kh55HdjmafGVyQfWaHURccoz4Vi-HAb9obSOc7CDCk:14919:12

     undefined
    vendor.js:15128:3
    TypeError: __WEBPACK_IMPORTED_MODULE_0_jquery___default(...)(...).pivot is not a function      

我的 Index.cshtml 似乎在 dist 文件夹中查找脚本，因此我将 pivot.js 文件移动到 dist 并在那里添加了脚本标签

<script type="text/javascript" src="~/dist/pivot.js"></script>
<script type="text/javascript" src="~/dist/pivot.min.js"></script>

我在package.json 中添加了jquery 和jquery-ui 作为依赖项和devdependencies（我确实怀疑这是否是正确的做法）：

    "devDependencies": {
          "jquery": "^3.2.1",
          "jquery-ui": "^1.12.1"
          ....
     },
      "dependencies": [
       { "jquery": "^3.2.1" },
       { "jquery-ui": "^1.12.1" } 
      ]

还添加了一个 jquery 作为 webpack.config.js 的插件，正如其他插件的建议一样。

       plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        })

我尝试在我的视图模型的脚本标签中添加指向jquery 的cdn 链接。这些更改都没有更改错误消息。我应该如何引用这个和类似的jquery 插件？

Answer 1

我为使 pivottable.js 与 webpack 和 Aurelia 一起工作而奋斗了一段时间。您将需要以下 NPM 包：

jquery
jquery-ui-dist
pivottable

“正常”的 jquery-ui 包对我不起作用。

在您的打字稿文件中，使用以下导入：

import * as $ from 'jquery';
import 'jquery-ui-dist/jquery-ui';
import 'pivottable';

然后您可以使用$('#output').pivotUI(...) 函数。在您的模板 HTML 文件中，您需要导入 CSS：

<require from="pivottable/dist/pivot.css"></require>

使用此设置和相同的 ProvidePlugin 代码，我可以在 webpack 中使用 pivottable.js，而无需额外的 script 标签。

Answer 2

您可能应该添加一个导入语句
import 'pivottable';
jquery导入后 如果 npm 包是正确的，应该这样做。

这更像是一个 webpack 问题，而不是 aurelia。 谷歌搜索“webpack jquery pivottable”应该会给你更多答案。