为什么“从'datatables.net'导入数据表”可以在某些机器上工作，而在其他机器上不行？答案

【问题标题】：Why would `import dataTables from 'datatables.net'` work on some machines but not others?为什么“从'datatables.net'导入数据表”可以在某些机器上工作，而在其他机器上不行？
【发布时间】：2020-02-27 08:02:42
【问题描述】：

我们有一个单文件 Vue 1.x 组件，它是数据表的包装器。它的基本原理如下所示：

<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 配置编译的。

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

看起来，当在我们的构建服务器上构建时，dataTables 实际上并没有正确导入。我可以确认它是导致问题的实际生成的 app.js，因为下载它并在本地运行它会产生相同的错误。我已经尝试了我能想到的一切来匹配环境，包括确保 node/npm 版本相同和rm -rfing node_modules。然而，我们仍然反复得到相同的结果。

我不知道在哪里调试，因为我承认我并不精通 webpack 构建的机制。什么可能导致这似乎只适用于某些机器？

【问题讨论】：

标签： javascript jquery vue.js datatables

【解决方案1】：

该错误意味着没有 $.fn.dataTable 对象。

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

// 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 上对其进行初始化。

【讨论】：