如何在导入加载器配置的测试中添加模块

Posted 2023-05-09

【中文标题】如何在导入加载器配置的测试中添加模块

【英文标题】：How to add modules in test for imports-loader configuration

【发布时间】：2021-10-03 11:12:55

【问题描述】：

当我将旧版 webapp 转换为基于 webpack 的应用程序时，它使用 mCustomScrollbar。 根据 mCustomScrollbar 的文档，使用 webpack 运行需要使用 imports-loader。但是 doc 中给出的语法与旧版本的 webpack 兼容，而不是最新版本。

根据imports-loader的doc，我无法将malihu-custom-scrollbar-plugin添加到test的modules-rules。

    test: /jquery-mousewheel/, /* This works fine */
    use: [
            loader: "imports-loader",
            options: 
                imports: 
                    moduleName: "jquery",
                    name: "$"
                ,
                wrapper: "window",
                additionalCode:
                    "var define = false;"
            
        ]
,

    test: /malihu-custom-scrollbar-plugin/, /* Not working */
    use: [
            loader: "imports-loader",
            options: 
                imports: 
                    moduleName: "jquery",
                    name: "$"
                ,
                wrapper: "window",
                additionalCode:
                    "var define = false;"
            
        ]

给出以下错误，

ERROR in ./node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css 8:6
Module parse failed: 'import' and 'export' may only appear at the top level (8:6)
File was processed with these loaders:
 * ./node_modules/imports-loader/dist/cjs.js

我的 vendor.js 如下所示，

...
import "malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css";
...

import $ from "jquery";
window.jQuery = jQuery;
window.$ = $;

...
require("jquery-mousewheel")($);
require("malihu-custom-scrollbar-plugin")($);
...

那么如何让它工作以及如何在同一个导入加载器中组合两个模块，在我的例子中是 jquery-mousewheel 和 malihu-custom-scrollbar-plugin。

【参考方案1】：

由于 mCustomScrollbar 的 .css 文件与 webpack 的其他加载器产生问题，因此将 imports-loader 配置内联添加到 vendor.js 并从 webpack 配置文件中删除。

现在vendor.js 如下所示，

...
import "malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css";
...

import $ from "jquery";
window.jQuery = jQuery;
window.$ = $;

...
require("imports-loader?wrapper=window&!jquery-mousewheel");
require("imports-loader?wrapper=window&!malihu-custom-scrollbar-plugin");
...

有了这个 mCustomScrollbar 开始工作，如果有更好的方法或者这是正确的方法，请告诉我。