帶有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

你快到了！

確保通過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主頁上顯示的示例。

Answer 2

禁用AMD似乎就是答案。 我發現的許多解決方案都不適合我。

禁用AMD的最簡單方法是將以下規則添加到您的webpack配置（webpack 2+）

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

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;