Как правильно загрузить плагин datatables.net в приложение Vue Webpack?

Question

Я создаю приложение Vue Webpack, которое зависит от DataTables .Плагин для сбора данных опирается на jQuery, и, насколько я понимаю, я не могу импортировать его в свой компонент Vue, например import datatable from 'datatables.net';.

. В результате я импортирую его так:

<template>
  <table id="datatable" class="table"></table>
</template>

<script>
export default {
  name: 'MyComponent',

  beforeCreate() {
    // Fetch jQuery and Datatables JS
    const jQueryElem = document.createElement('script');
    jQueryElem.setAttribute('src', 'https://code.jquery.com/jquery-3.3.1.min.js');
    document.head.appendChild(jQueryElem);

    let dataTableIntervalCount = 0;
    const dataTableInterval = setInterval(() => {
      dataTableIntervalCount += 1;
      if (dataTableIntervalCount === 100) {
        clearInterval(dataTableInterval);
        this.dataTableError = true;
      }

      if (window.$) {
        // Load JS
        const dataTableElem = document.createElement('script');
        dataTableElem.setAttribute('src', 'https://cdn.datatables.net/v/bs4/dt-1.10.16/datatables.min.js');
        document.head.appendChild(dataTableElem);

        // Load CSS
        const dataTablesCss = document.createElement('link');
        dataTablesCss.setAttribute('rel', 'stylesheet');
        dataTablesCss.setAttribute('type', 'text/css');
        dataTablesCss.setAttribute('href', 'https://cdn.datatables.net/v/bs4/dt-1.10.16/datatables.min.css');
        document.head.appendChild(dataTablesCss);

        clearInterval(dataTableInterval);
      }
    }, 50);
  },
}
</script>

Это причиняет мне много боли.Я должен проверить, загрузился ли jQuery, и только после этого вставить подключаемый модуль данных из CDN.В противном случае выдает ошибку в консоли.

После того, как я извлекаю подключаемый модуль с данными, мне нужно теперь инициализировать его на элементе #datatable внутри другого setInterval(), потому что для извлечения плагина требуется несколько миллисекундиз CDN.Это иногда вызывает еще одну ошибку консоли и требует немало обходных путей.

Есть ли более надежный способ сделать это?Спасибо.

Answer 1

Просто:

import jquery from 'jquery'

Вам не нужно загружать / упаковывать jQuery, вы можете упаковать его как внешний, например, так:

externals: {
'jquery': 'jQuery',
'vue': 'Vue'
}

Тогда просто загрузите jQuery на страницу, как вы это делаете регулярно. Вот документация на внешнем веб-пакете: https://webpack.js.org/configuration/externals/

(Бесстыдный плагин). Я создал оболочку jQuery DataTables для Vue: https://github.com/niiknow/vue-datatables-net#usage

См. Использование и демонстрацию для получения дополнительной информации о том, как все загружается.