將PivotTable.js與aurelia和asp.net核心一起使用

Question

我的項目是基於帶有aurelia的ASP.Net Core設置的，如本視頻由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> 

它不斷拋出“樞軸不是函數”錯誤，如下所示：

    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文件夾中查找腳本，因此我將ivot.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中使用ivottable.js，而無需其他script標簽。

Answer 2

您可能應該添加一個導入語句
import 'pivottable';
jQuery導入后，如果npm包正確，則應該這樣做。

它比aurelia更像是一個webpack問題。 谷歌搜索“ webpack jQuery的pivottable”應該給你更多的答案。