Question

我们有一个单文件Vue 1.x组件，它是dataTables的包装。它的基础看起来像这样：

<template>
...
</template>

<script>
import Vue from 'vue';
import $ from 'jquery';
import dataTables from 'datatables.net';
import dataTablesSelect from 'datatables.net-select';
import dataTablesColReorder from 'datatables.net-colreorder';
import dataTablesScroller from 'datatables.net-scroller';

const Table = Vue.extend({
    ...
    created() {
        $.fn.dataTable.ext.errMode = 'throw';
        ...
        this.dataTable = this.$table.DataTable(this.options);
    },
});
</script>

该组件是通过我们的Webpack配置编译的。

这很好用。最近，我们一直在将代码库移植到Vue2.x。在我以及我的同事的机器上，移植的组件都很好用。但是，一旦使用相同的命令在我们的构建服务器上构建了它，它就会在页面加载时抛出此错误：
TypeError: Cannot read property 'ext' of undefined
参考上面的行：
$.fn.dataTable.ext.errMode = 'throw';

然后看来，当在我们的构建服务器上构建数据表时，实际上并没有正确地导入它。我可以确认这是导致问题的实际生成的app.js，因为下载并在本地运行会产生相同的错误。我已经尝试了所有可以想到的匹配环境的方法，包括确保节点/ npm版本相同以及rm -rf ing node_modules。但是我们仍然反复得到相同的结果。

我对在哪里调试还有其他想法，因为我当然不熟悉Webpack构建的机制。可能是什么原因导致它似乎只能在某些计算机上工作？

Answer 1

该错误表示没有$ .fn.dataTable对象。

发布您的webpack混合文件以及您如何使用jQuery。我怀疑这里的外部/多个jQuery冲突，您在其中导入一个jQuery，并且在另一个jQuery上初始化了DataTable。看看是否可行。

// Right below your imports, initialize everything you imported
// this make sure fn.dataTable get initialized on the imported jQuery
// which is reference as $ in this case
dataTables(window, $);
dataTablesSelect(window, $);
dataTablesColReorder(window, $);
dataTablesScroller(window, $);

无耻的插头，请在此处查看我的包装-https://github.com/niiknow/vue-datatables-net-它可以帮助您简化工作。即使使用我的包装器，您仍然必须知道要在哪个jQuery上对其进行初始化。

为什么从'datatables.net'导入dataTables在某些机器上可以工作而在其他机器上却不能工作？

1 个答案: