带有Webpack和Typescript的JQuery插件(数据表)

Question

我正在尝试使用带有webpack和typescript的datatables JQuery插件.我已经有了JQuery并且与typings(intelliSense工作)一起运行,对于我只有intelliSense的数据表,但在运行应用程序之后构建webpack时,代码在$('#id')时失败.atataTable()线.

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"},

正如进口装载机的文件所说;

在使用CommonJS之前,有许多模块检查define函数.由于webpack能够兼顾两者,因此在这种情况下它们默认为AMD,如果实现是古怪的,这可能是一个问题.

datatables提供了两者,所以我想使用这里提到的define => false来禁用AMD https://www.datatables.net/forums/discussion/32542/datatables-and-webpack

现在我被卡住了:(

Answer 1

你快到了!

确保两者datatables.net并datatables.net-dt通过NPM安装:

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

在您的条目文件中./src/main.js写:

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

之后,以下格式的任何代码逻辑都$(...).DataTable将作为DataTables主页上显示的示例.

Answer 2

禁用 AMD 似乎是答案。我找到的许多解决方案都不适用于我。

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

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