Question

遇到WebPack问题。我有一个供应商库（说ChildVendor），它实现了requireJS和commonJS的兼容性，所以，我需要在我的WebPack项目中要求它var lib = require('./childVendor');。这个ChildVendor库有一个依赖项（说SuperVendor），它们都是requirejs-和commonjs-adapted，所以childVendor.js的标题如下：

(function(root, factory) {
  if (typeof define === 'function' && define.amd) {
    define(["superVendor"], factory);
  } else if (typeof exports === 'object') {
    module.exports = factory(require('superVendor'));
  } else {
    root.Shepherd = factory(root.SuperVendor);
  }
}(this, function(SuperVendor) { /*...*/ }));

主要问题是我需要手动将SuperVendor库全局包含在html文件中（因此，它只是初始化为window.SuperVendor），因为它应该被其他第三方库使用。

要解决这个问题，我尝试了webpack.ProvidePlugin，就像

一样

plugins: [
    new webpack.ProvidePlugin({
        'superVendor': 'SuperVendor'
    })
],

但错误仍然相同（Module not found: Error: Can't resolve 'superVendor' in '...'）。

Answer 1

ProvidePlugin不是您想要做的解决方案。您使用它设置的配置告诉Webpack：

每当superVendor作为模块中的自由变量遇到时，请加载模块SuperVendor并将变量superVendor设置为SuperVendor导出的内容。

换句话说，如果你有一个包含它的模块：

superVendor.someMethod();

Webpack将其解释为：

var superVendor = require("SuperVendor");
superVendor.someMethod();

您应该使用externals配置选项：

externals: {
  'superVendor': 'SuperVendor'
}

这告诉Webpack如果需要模块superVendor，则应该从名为SuperVendor的外部环境中寻找它。

WebPack用全局变量替换供应商需求调用

1 个答案: