Datatables.net（1.10.22）和#x2B；网页包Encore（1.11）和#x2B；Symfony（5.2.6）

我正在处理一个Symfony 5.2.6项目，我试图在我的项目中使用datatables.net库，但找不到正确导入它的方法

我使用了很多js/jquery库，除了datatables之外，其他一切都很好。 （我正在使用Metronic管理模板）

这是我的webpack.config.js：

const Encore = require('@symfony/webpack-encore');
const CopyWebpackPlugin = require('copy-webpack-plugin');

if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')

    .addStyleEntry('basecss', './assets/sass/style.scss')
    .addStyleEntry('pluginscss', './assets/plugins/plugins.scss')
    .addStyleEntry('extrascss', './assets/css/extras.css')

    .addEntry('app', './assets/app.js')
    .addEntry('plugins', './assets/plugins/plugins.js')
    .addEntry('scripts', './assets/scripts.js')

    .addEntry('test', './assets/test.js')

    .addEntry('page-ms-liste', './assets/pages/matiereseche/liste.js')
    
    .addStyleEntry('page-login-css', './assets/pages/authentication/login.css')

    .enableStimulusBridge('./assets/controllers.json')
    
    .splitEntryChunks()
    
    .enableSingleRuntimeChunk()
    
    .cleanupOutputBeforeBuild()
    
    .enableBuildNotifications()
    
    .enableSourceMaps(!Encore.isProduction())
    
    .enableVersioning(Encore.isProduction())

    .configureBabel((config) => {
        config.plugins.push('@babel/plugin-proposal-class-properties');
    })
    
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })

    // enables Sass/SCSS support
    .enableSassLoader()

    .addPlugin(new CopyWebpackPlugin({
        patterns: [
            { from: './assets/images', to: 'images' }
        ],
    }))

    .addLoader({
        test: require.resolve('jquery'),
        use: [{
            loader: 'expose-loader',
            options: {
                exposes: [
                    {
                        globalName: "$",
                        override: true,
                    },
                    {
                        globalName: "jQuery",
                        override: true,
                    }
                ]
            }
        }]})

    .addLoader({
        test: '/datatables\.net.*/',
        use: [{
            loader: 'imports-loader',
            options: {
                imports: {
                    moduleName: 'jquery',
                    name: '$',
                },
                additionalCode: "var define = false;"
            }
        }]})


;
const config = Encore.getWebpackConfig();

module.exports = config;

我还尝试使用

.autoProvidejQuery（）

在my scripts.js中，我有：

window.jQuery = window.$ = require('jquery');
// ...    
require('datatables.net');
require('datatables.net-bs4');

然后在我的js文件中：

var t = $("#datatable");
        t.DataTable(.....)

错误：

未捕获的TypeError:$（…）。DataTable不是函数

我在这个主题上找到了很多线索，但我尝试了所有方法都没有成功（使用加载程序，…） 我还尝试从CDN和datatables导入jquery，但我有一个jquery问题（jquery未定义）

如果有人有想法

谢谢。

删除

window.jQuery=window.$=require（'jQuery'）

然后，您可以通过以下方式导入数据表：

import $ from "jquery";
require('datatables.net-bs4')( window, $ );

这样，DataTable就可以被识别，您就可以使用它了。
在对Stackoverflow的各种答案进行了一段时间的测试后，我成功地使它工作了（在Guillaume F.和Dylan Kas的帮助下）

以下是文件：

webpack.config.js

const Encore = require('@symfony/webpack-encore');
const CopyWebpackPlugin = require('copy-webpack-plugin');

if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')

     // Main Js file
    .addEntry('app', './assets/app.js')
     
    // In my case Datatable init code is in this file. Don't forget to load this asset from your template page with the shortcut : {{ encore_entry_script_tags('my-page') }}
    .addEntry('my-page', './assets/pages/my-page.js')

    //.. Other imports here ..
    /*.addEntry('scripts', './assets/scripts.js')*/

    .splitEntryChunks()

    .enableSingleRuntimeChunk()

    .cleanupOutputBeforeBuild()

    .enableBuildNotifications()

    .enableSourceMaps(!Encore.isProduction())

    .enableVersioning(Encore.isProduction())

    .configureBabel((config) => {
        config.plugins.push('@babel/plugin-proposal-class-properties');
    })

    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })
    
    .addPlugin(new CopyWebpackPlugin({
        patterns: [
            { from: './assets/images', to: 'images' }
        ],
    }))

;
const config = Encore.getWebpackConfig();

// Without this, I have issues with my DT.net requires
config.module.rules.unshift({
    parser: {
        amd: false,
    }
});

module.exports = config;

"use strict";

var MyPage = {
    init: function () {
        const table = $('#datatable').DataTable({
            buttons: [
                {
                    extend: 'print',
                    exportOptions: {
                        columns: [0, 1, 2, 3]
                    }
                },
                {
                    extend: 'excelHtml5',
                    exportOptions: {
                        columns: [0, 1, 2, 3]
                    }
                },
            ],
            columnDefs: [
                {
                    width: '75px',
                    targets: 4,
                },
            ],
        });

        $('#export_print').on('click', function(e) {
            e.preventDefault();
            table.button(0).trigger();
        });

        $('#export_excel').on('click', function(e) {
            e.preventDefault();
            table.button(1).trigger();
        });
    },
};
jQuery(document).ready(function () {
    MyPage.init();
});

我的app.js文件

window.jQuery = window.$ = require('jquery');

require('bootstrap');

window.Popper = require('popper.js').default;

// Needed form Datatables Buttons plugin
window.JSZip = require('jszip');
const pdfMake = require('pdfmake/build/pdfmake.js');
const pdfFonts = require('pdfmake/build/vfs_fonts.js');
pdfMake.vfs = pdfFonts.pdfMake.vfs;


require('datatables.net')(window, $);
require('datatables.net-bs4')(window, $);
require('datatables.net-buttons/js/dataTables.buttons.min.js')(window, $);
require('datatables.net-buttons-bs4')(window, $);
require('datatables.net-buttons/js/buttons.flash.js')(window, $);
require('datatables.net-buttons/js/buttons.html5.js')(window, $);
require('datatables.net-buttons/js/buttons.print.js')(window, $);

Mypackages.json：

{
    "dependencies": {
        // others imports above
        "bootstrap": "^4.6.0",
        "datatables.net": "^1.10.24",
        "datatables.net-autofill-bs4": "^2.3.5",
        "datatables.net-bs4": "1.10.24",
        "datatables.net-buttons-bs4": "^1.7.0",
        "datatables.net-colreorder-bs4": "^1.5.2",
        "datatables.net-fixedcolumns-bs4": "^3.3.2",
        "datatables.net-fixedheader-bs4": "^3.1.7",
        "datatables.net-keytable-bs4": "^2.5.3",
        "datatables.net-responsive-bs4": "^2.2.6",
        "datatables.net-rowgroup-bs4": "^1.1.2",
        "datatables.net-rowreorder-bs4": "^1.2.7",
        "datatables.net-scroller-bs4": "^2.0.3",
        "datatables.net-select-bs4": "^1.3.1",
        "jquery": "^3.6.0",
        "jszip": "^3.5.0",
        "pdfmake": "^0.1.36",
        "popper.js": "^1.16.1",
    },
    "devDependencies": {
        "@symfony/stimulus-bridge": "^2.0.0",
        "@symfony/webpack-encore": "^1.0.0",
        "copy-webpack-plugin": "^8.1.0",
        "core-js": "^3.0.0",
        "expose-loader": "^2.0.0",
        "imports-loader": "^2.0.0",
        "lodash": "^4.17.13",
        "regenerator-runtime": "^0.13.2",
        "sass": "^1.32.8",
        "sass-loader": "11.0.0",
        "script-loader": "^0.7.2",
        "stimulus": "^2.0.0",
        "webpack-notifier": "^1.6.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    }
}

最后，我的文件初始化了datatable（我每页使用一个条目js文件）：
page.js

const Encore = require('@symfony/webpack-encore');
const CopyWebpackPlugin = require('copy-webpack-plugin');

if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')

     // Main Js file
    .addEntry('app', './assets/app.js')
     
    // In my case Datatable init code is in this file. Don't forget to load this asset from your template page with the shortcut : {{ encore_entry_script_tags('my-page') }}
    .addEntry('my-page', './assets/pages/my-page.js')

    //.. Other imports here ..
    /*.addEntry('scripts', './assets/scripts.js')*/

    .splitEntryChunks()

    .enableSingleRuntimeChunk()

    .cleanupOutputBeforeBuild()

    .enableBuildNotifications()

    .enableSourceMaps(!Encore.isProduction())

    .enableVersioning(Encore.isProduction())

    .configureBabel((config) => {
        config.plugins.push('@babel/plugin-proposal-class-properties');
    })

    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })
    
    .addPlugin(new CopyWebpackPlugin({
        patterns: [
            { from: './assets/images', to: 'images' }
        ],
    }))

;
const config = Encore.getWebpackConfig();

// Without this, I have issues with my DT.net requires
config.module.rules.unshift({
    parser: {
        amd: false,
    }
});

module.exports = config;

"use strict";

var MyPage = {
    init: function () {
        const table = $('#datatable').DataTable({
            buttons: [
                {
                    extend: 'print',
                    exportOptions: {
                        columns: [0, 1, 2, 3]
                    }
                },
                {
                    extend: 'excelHtml5',
                    exportOptions: {
                        columns: [0, 1, 2, 3]
                    }
                },
            ],
            columnDefs: [
                {
                    width: '75px',
                    targets: 4,
                },
            ],
        });

        $('#export_print').on('click', function(e) {
            e.preventDefault();
            table.button(0).trigger();
        });

        $('#export_excel').on('click', function(e) {
            e.preventDefault();
            table.button(1).trigger();
        });
    },
};
jQuery(document).ready(function () {
    MyPage.init();
});

请注意，在我的例子中，我从2个html元素切换按钮。
我试图按照您所说的那样做，但仍然存在问题：
无法设置未定义的
（jquery.dataTables.js:132）的属性“$”，如果我检查此文件，问题是：
this.$=function（sSelector，oOpts）{返回this.api（true）。$（sSelector，oOpts）；}尝试用我的编辑更正它