JQuery插件（datatables）与Webpack和Typescript的整合

Question

我正在尝试在webpack和typescript中使用datatables JQuery插件。 我已经成功安装了JQuery并添加了typings（智能感知可以工作），但是对于datatables，我只有智能感知，在webpack构建后运行应用程序时，当代码到达$('#id').dataTable()行时，代码会失败。

app.js:43Uncaught TypeError: $(...).dataTable is not a function

我无法找出如何正确附加此插件，有人可以帮帮我吗？

webpack.config.js如下; https://gist.github.com/marcingolenia/2fa78ed2cd42f9294da5edd22d351245

我希望这行代码能解决问题;

{ test: require.resolve("dataTables.net"), loader: "imports?define=>false,$=jquery"},

正如 import loader 的文档所述；

许多模块在使用 CommonJS 之前会检查 define 函数是否可用。由于 webpack 能够同时支持两种方式，它们默认使用 AMD 方式，但如果实现有问题，则可能会出现问题。

datatables 提供了这两种方式，因此根据这里的说明，我想要禁用 AMD，将 define=>false。但是现在卡住了 :(

- Jinx

---

你是否安装了jQuery Datatables的类型定义？ - thitemple

是的，这些类型定义确保了 $(...).dataTable 的智能感知功能正常工作，并且 TypeScript 编译器没有显示任何错误。 这些类型定义来自于我的 typings; "jquery": "registry:dt/jquery#1.10.0+20160316155526", "jquery.datatables": "registry:dt/jquery.datatables#1.9.4+20160317120654" - Jinx

Answer 1

你快要完成了！

请确保已通过npm安装了datatables.net和datatables.net-dt两个库：

npm install datatables.net datatables.net-dt --save-dev

在您的入口文件 ./src/main.js 中编写如下内容：

require( 'datatables.net' )( window, $ )
require( 'datatables.net-dt' )( window, $ )

之后，任何遵循以下格式$(...).DataTable的代码逻辑都将像DataTables主页上显示的示例一样工作。

- Sitian Liu

---

嗨，谢谢你的建议！明天我会试一下这个！ - Jinx

Answer 2

禁用 AMD 似乎是解决方案。我发现的许多解决方案对我来说都不起作用。

禁用 AMD 的最简单方法是将以下规则添加到您的 Webpack 配置中（Webpack 2+）。

module: {
    rules: [
        { parser: { amd: false } }
    ]
}

- Matt B

Answer 3

禁用 AMD 对我解决了这个问题。 如果你正在使用 Symfony 4 中的 Webpack Encore，以下是如何禁用 AMD：

var config = Encore.getWebpackConfig();

// disable amd, for datatable
config.module.rules.unshift({
  parser: {
    amd: false
  }
});

module.exports = config;

- sunix