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

Question

我的项目是基于 ASP.Net Core with 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 安装的，现在看来我在正确引用它时遇到了问题。我直接在我的 viewmodel

的脚本标签中进行了测试

     <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 链接。 None 这些更改已更改错误消息。我应该如何引用这个和类似的 jquery 插件？

Answer 1

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

与 aurelia 相比，它更像是一个 webpack 问题。谷歌搜索 "webpack jquery pivottable" 应该会给你更多答案。

Answer 2

为了 pivottable.js 使用 webpack 和 Aurelia，我努力了一段时间。您将需要以下 NPM 包：

jquery
jquery-ui-dist
pivottable

"normal" 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 标签。

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

Using PivotTable.js with aurelia and asp.net core

javascript

jquery

asp.net-core

aurelia

pivottable.js