1

我正在使用一个作为 umd 模块分发的库，我正在导入的文件之一中的代码如下所示

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 知道这不是加载程序并正常执行此文件或

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

4

1 回答 1

1

最简单和坦率地说最好的解决方案是使用不同的构建。现在大多数库都有一个 UMD 构建以及一个 npm 包。

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

{
  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'
  }
]
于 2017-04-12T00:53:45.077 回答