symfony - Datatables.net (1.10.22) + Webpack Encore (1.11) + Symfony (5.2.6)

Question

我正在处理一个 Symfony 5.2.6 项目，我试图在我的项目中使用 datatables.net 库，但找不到正确导入它的方法。
我使用了很多 js/jquery 库，除了数据表外，一切都运行良好。
(我正在使用 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()在我的 scripts.js 中，我有:

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

然后在我的 js 文件中:

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

错误 :

Uncaught TypeError: $(...).DataTable is not a function

我在这个主题上找到了很多线程，但是我尝试了所有方法都没有成功(使用加载程序，...)
我也尝试从 CDN 和数据表导入 jquery，但我有一个 jquery 问题(jquery 未定义)
如果有人有想法...
谢谢你。

Answer 1

消除window.jQuery = window.$ = require('jquery');然后，您可以通过这种方式导入数据表:

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

这样，DataTable 应该被识别并且您将能够使用它。