0

我的项目是基于 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>

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

    "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插件？

4

2 回答 2

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

于 2018-03-06T09:45:58.867 回答
0


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

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

于 2018-02-09T12:57:05.310 回答