使用PivotTable.js和asp.net内核

Question

我的项目是建立在ASP.Net核心与奥雷利亚，如在这段视频由罗伯艾森伯格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> 

它一直抛出“枢轴不是函数”错误，如下所示：

    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>

我将jquery和jquery-ui添加为依赖项，并在package.json中添加devdependencies (我确实怀疑这是否正确)。

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

此外，还向webpack.config.js添加了一个jquery作为插件，这是为另一个插件所建议的。

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

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

Answer 1

您可能应该添加一个import语句。

import 'pivottable';

在导入jquery之后，如果npm包是正确的，则应该这样做。

这与其说是奥雷利亚，不如说是webpack的问题。谷歌"webpack jquery枢轴“应该会给你带来更多的答案。

Answer 2

为了让pivottable.js和webpack和奥雷利亚一起工作，我为此奋斗了一段时间。您将需要以下NPM软件包：

jquery
jquery-ui-dist
pivottable

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

在类型记录文件中，使用以下导入：

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标记。