在新的导入加载程序版本上使用带有webpack错误的jQuery数据表

Question

我在webpack安装中使用了最新的datatables.net-bs版本(1.11.5版本)。

为了使其工作，我必须在我的webpack.config.js中设置以下配置

{
    test: /datatables\.net.*/,
    use: 'imports-loader?define=>false'
}

我正在使用imports-loader==0.8.0。不幸的是，这个版本已经4年了，我想升级到最新版本(v3.1.1)。

当我这样做时，我会得到一个关于更改API的错误：

ValidationError:无效选项对象。Imports Loader已使用与API架构不匹配的options对象初始化。

当我从webpack-config中删除配置部分时，我会得到以下错误：

Uncaught :无法访问属性"$"，这是未定义的

我试图像这样使用新的imports-loader设置：

use: [
      {
       loader: "imports-loader",
       options: {
           imports: ["default jquery $"]
       }
  }
]

不幸的是，这并不能解决我的问题。

我的问题是:有谁知道如何配置imports-loader ，这样我就可以在不破坏数据的情况下使用最新版本了？

Answer 1

我也和DataTables和Webpack做过很多斗争。

关于您的错误:加载器的配置语法已更改。

下面是对我有用的东西：

webpack.config.js

{
    module: {
        rules: [
            {
                test: /datatables\.net.*.js$/,
                use: [{
                    loader: 'imports-loader',
                    options: {
                        additionalCode: 'var define = false; /* Disable AMD for misbehaving libraries */'
                    }
                }]
            }
        ],
    },
}

在您的JS文件中：

require('datatables.net')(window, $);
require('datatables.net-responsive')(window, $);  // if you added this plugin

它所做的是在所有datatables文件的基础上编写var define = false;，这实际上禁用了可数据的AMD模式(这破坏了webpack)。重要的是将此加载程序仅限于JS文件，否则它也会将其放入datatable CSS文件中，这将导致语法错误。

如果您正在使用symfony + webpack encore，您可以这样添加它：

Encore
    .addLoader({
        test: /datatables\.net.*.js$/,
        use: [{
            loader: 'imports-loader',
            options: {
                additionalCode: 'var define = false; /* Disable AMD for misbehaving libraries */'
            }
        }]
    })
;