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

Posted 2023-02-22

【中文标题】带有 Webpack 和 Typescript 的 JQuery 插件（数据表）

【英文标题】：JQuery Plugin (datatables) with Webpack and Typescript

【发布时间】：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"

【参考方案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;