带有 Webpack 和 Typescript 的 JQuery 插件（数据表）答案

【问题标题】：JQuery Plugin (datatables) with Webpack and Typescript带有 Webpack 和 Typescript 的 JQuery 插件（数据表）
【发布时间】：2016-08-15 22:41:55
【问题描述】：

我正在尝试将数据表 JQuery 插件与 webpack 和 typescript 一起使用。我已经启动了 JQuery 并与打字一起运行（智能感知有效），对于数据表我只有智能感知，但是在我运行应用程序时构建 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 的文档所说的那样；

有许多模块在使用之前检查定义函数通用JS。由于 webpack 两者都具备，所以它们默认使用 AMD 这种情况下，如果实现是古怪的，这可能是一个问题。

datatables 两者都提供，所以我想使用 define=>false 禁用 AMD，如此处所述 https://www.datatables.net/forums/discussion/32542/datatables-and-webpack

现在我被卡住了:(

【问题讨论】：

你安装了 jquery 数据表类型吗？
是的，打字在那里，所以 $(...).dataTable 的 intellSense 运行良好，打字稿编译器没有显示任何错误。这来自我的打字； "jquery": "registry:dt/jquery#1.10.0+20160316155526", "jquery.datatables": "registry:dt/jquery.datatables#1.9.4+20160317120654"

标签： javascript typescript webpack

【解决方案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 主页上显示的示例运行。

【讨论】：

您好，感谢您的输入！我明天试试这个！

【解决方案2】：

禁用 AMD 似乎是答案。我发现的许多解决方案都不适合我。

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

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

【讨论】：

【解决方案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;

【讨论】：