Плагин JQuery (datatables) с Webpack и Typescript

Я пытаюсь использовать плагин datatables JQuery с webpack и typescript. У меня уже есть JQuery и работает вместе с typings (intelliSense работает), для datatables у меня есть только intelliSense, но после сборки webpack при запуске приложения код терпит неудачу, когда дело доходит до $('#id').строка dataTable ().

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

Я не могу понять, как правильно подключить этот плагин, может ли кто-нибудь мне помочь?

в webpack.конфиг.JS-это как следует; https://gist.github.com/marcingolenia/2fa78ed2cd42f9294da5edd22d351245

Я надеюсь, что эта строка решит проблему;

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

Как говорит doc загрузчика импорта;

есть много модулей, которые проверяют функцию define перед использованием На CommonJS. С webpack, может быть, они по умолчанию для AMD в этот случай, который может быть проблемой, если реализация является причудливой.

datatables обеспечивает оба, поэтому я хотел отключить AMD, используя define=>false, как упоминалось здесь https://www.datatables.net/forums/discussion/32542/datatables-and-webpack

теперь я застрял :(

8
javascript typescript webpack

2 ответов

вы почти там!

убедитесь, что оба 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-dtt' )( window, $ )

после этого любая логика кода следующего формата $(...).dataTable будет работать в качестве примеров, показанных на главной странице DataTables.

5

отключение AMD, похоже, является ответом. Многие из решений, которые я нашел, не работали на меня.

самый простой способ отключить AMD-добавить следующее правило в конфигурацию webpack (webpack 2+)

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