有人用 RequireJS 嗎？

RequireJS 在網頁技術中，現在已經算是較舊的技術了（有些人可能會說是很古老的技術），但它仍然被廣泛使用，而且最近有很多關於 RequireJS 和 DataTables 的問題。我一直想做的事情是建立一個單一的定義檔案，可以用來載入任何 DataTables 的擴充套件，無論您使用的是哪個樣式函式庫。所以，終於到了重拾 AMD 載入器技能，把它完成的時候了！

載入器腳本

我已在下載區建立了一個 RequireJS 頁面，詳細說明如何使用 RequireJS 和 DataTables 及其擴充套件，並有一個腳本將建立一個 RequireJS 設定，從我們的 CDN 載入 DataTables - 看起來像這樣

(function(){

var cdnBase = 'https://cdn.datatables.net';
var extensions = [
    {n: 'autofill', v: '2.7.0'},
    {n: 'buttons', v: '3.1.2'},
    {n: 'fixedcolumns', v: '5.0.3'},
    {n: 'fixedheader', v: '4.0.1'},
    {n: 'keytable', v: '2.12.1'},
    {n: 'responsive', v: '3.0.3'},
    {n: 'rowgroup', v: '1.5.0'},
    {n: 'rowreorder', v: '1.5.0'},
    {n: 'scroller', v: '2.4.3'},
    {n: 'searchbuilder', v: '1.8.1'},
    {n: 'searchpanes', v: '2.3.3'},
    {n: 'select', v: '2.1.0'},
    {n: 'staterestore', v: '1.4.1'}
];

var styles = [
    {s: 'bm', f: 'bulma'},
    {s: 'bs', f: 'bootstrap'},
    {s: 'bs4', f: 'bootstrap4'},
    {s: 'bs5', f: 'bootstrap5'},
    {s: 'dt', f: 'dataTables'},
    {s: 'ju', f: 'jqueryui'},
    {s: 'se', f: 'semanticui'}
];

// Initial paths which aren't included in the automatic path setup
var paths = {
    'datatables.net': cdnBase + '/2.1.8/js/jquery.dataTables.min',
    'datatables.net-buttons-print': cdnBase + '/buttons/3.1.2/js/buttons.print.min',
    'datatables.net-buttons-html5': cdnBase + '/buttons/3.1.2/js/buttons.html5.min',
    'datatables.net-buttons-colvis': cdnBase + '/buttons/3.1.2/js/buttons.colVis.min',
    'jquery': 'https://code.jquery.com/jquery-3.6.0.min'
};

for (var i=0 ; i<styles.length ; i++) {
    paths['datatables.net-' + styles[i].s] =
        cdnBase + '/2.1.8/js/dataTables.' + styles[i].f + '.min';
}

for (var i=0 ; i<extensions.length ; i++) {
    var e = extensions[i];

    paths['datatables.net-' + e.n] =
        cdnBase + '/' + e.n + '/' + e.v + '/js/dataTables.' + e.n + '.min';

    for (var j=0 ; j<styles.length ; j++) {
        var s = styles[j];

        paths['datatables.net-' + e.n + '-' + s.s] = cdnBase + '/' + e.n + '/' + e.v + '/js/' + e.n + '.' + s.f + '.min';
    }
}

require.config({
    paths: paths
});

})();

我當然可以直接列出所有的檔案和路徑，但使用腳本會更精簡，更容易維護，而且老實說，更有趣！

太棒了 - 我們來使用它吧

使用方法非常簡單 - 如果您之前使用過 RequireJS，像您習慣的那樣載入 RequireJS，包含上面的腳本，然後使用我們的 NPM 命名慣例 require 您需要的模組

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
<script>
// .. Script from above

require(
    ['jquery', 'datatables.net'],
    function ($) {
        $('#myTable').DataTable();
    }
)
</script>

這個執行中的範例在這裡。

給 AMD 一些愛

雖然完全接受 AMD 載入現在是一種舊技術，但我希望這對你們中的一些人有所幫助。如果是的話，請告訴我 - 我會考慮將它放到 NPM 和我們的 CDN 上（版本控制可能會與 DataTables 的主要版本發布綁定，並且可能會覆蓋您需要在該 DataTables 版本發布之前發布的特定擴充套件版本）。

ES 模組呢？

DataTables 核心現在確實有一個模組檔案可作為 ES 模組載入，我正在研究如何最好地將其擴展到樣式整合和擴充套件。不幸的是，我們需要的一個關鍵功能是不需要您列出每個想要載入的檔案，Import Maps 尚未在 Chrome 以外的任何瀏覽器中支援。CSS 也會是一個問題，儘管在使用套件管理器時可能會有所幫助。