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

Question

WebPack遇到问题。我有一个供应商库（称为ChildVendor），它实现requireJS和commonJS兼容性，所以我需要在我的WebPack项目中需要它，如var lib = require('./childVendor');。这ChildVendor库具有依赖性（话说SuperVendor），且二者都requirejs-和CommonJS的适应，如此，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' 
} 

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