Question

我使用的是作为umd模块分发的lib，我导入的文件之一的代码看起来像这样

lib.js

(function (global, factory) {
    if (typeof define === "function" && define.amd) {
        define(['exports', '../utils/require-isdefined-plugin!lodash'], factory);
    } else if (typeof exports !== "undefined") {
        factory(exports, require('lodash'));
    } else {
        var mod = {
            exports: {}
        };
        factory(mod.exports, global.lodash);
        global.registry = mod.exports;
    }
})(this, function (exports, _lodash) {
    'use strict';
    // Library code
})

现在当我在我的代码中使用这个lib.js并运行webpack时，它会抛出此错误

错误：模块'H：\ Projects \ abc \ umd \ app \ utils \ require-isdefined-plugin.js'不是加载程序（必须具有普通或俯仰功能）

我认为webpack将“../utils/require-isdefined-plugin”视为一个加载器并抱怨。

我的问题是我如何让webpack知道这不是一个加载器并正常执行此文件或

有没有其他方法可以使这项工作？

Answer 1

最简单，最坦率的解决方案是使用不同的版本。现在大多数库都有UMD版本和npm包。

如果这不是一个选项，您可以使用imports-loader来禁用Shimming - imports-loader中显示的AMD define，因此webpack不会触及它并将使用commonjs版本。您可以为库添加规则：

{
  test: require.resolve('./path/to/lib'),
  loader: 'imports-loader?define=>false'
}

require.resolve与常规require的工作方式相同，但为您提供已解析模块的完整路径，而不是其内容，因此如果您导入它的方式仍然可以require.resolve('lib')

为了安全起见，您还应该从常规.js规则中排除该库，因为对同一文件有两个规则通常不会很好。您的规则可能如下所示：

rules: [
  {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: [/node_modules/, require.resolve('./path/to/lib')]
  },
  {
    test: require.resolve('./path/to/lib'),
    loader: 'imports-loader?define=>false'
  }
]

模块不是装载机必须具有正常或俯仰功能

1 个答案: