在React / Webpack中创建全局变量

Question

我有一个需要加载的外部库，并且能够在我的应用中引用。 该库在NPM上不可用，因此我不能像在其他插件上那样将其导入到应用程序的顶部。 在寻找最佳解决方法后，似乎在webpack中创建全局变量是访问该库的最佳方法，但是我在网上找到的有限文档并不十分清楚。 这是我所做的：

在我的webpack.config文件中，我在下面添加了以下行：

new webpack.ProvidePlugin({
    MarketingCloud: "../src/scripts/marketing-cloud-javascript-sdk/marketing_cloud",
}),  

我的理解是，上面的行使我可以访问此脚本中的函数，因为它现在已定义为全局变量，但是当我尝试在自己的组件之一中包含onclick函数时，我收到未定义MarketingCloud的错误消息。 如果我将其更改为window.MarketingCloud，它将呈现出页面，但onclick函数会给我定义合理的错误。

我正在使用使用webpack / babel的create-react-app样板。 如果有帮助，这是我要添加的文件的内容，我在顶部添加了导入jQuery，以删除一些未定义的jQuery错误：

import {$, jQuery} from 'jquery';

(function($) {
  window.MarketingCloud = {
    env:   {},
    wsse:  new Wsse(),

    /** Make the api request */
    /* callback should follow standard jQuery request format:
     *    function callback(data)
     */
    makeRequest: function (username, secret, method, params, endpoint, callback)
    {
        var headers = MarketingCloud.wsse.generateAuth(username, secret);
        var url = 'https://'+endpoint+'/admin/1.4/rest/?method='+method;
        $.ajax(url, {
            type:'POST',
            data: params,
            complete: callback,
            dataType: "json",
            headers: {
                'X-WSSE': headers['X-WSSE']
            }
        });
    }
  };
})(jQuery);

任何帮助深表感谢！

Answer 1

不要尝试将其附加到窗口对象-而是export default MarketingCloud 。 引用Webpack文档（重点是我的）：

自动加载模块。 每当在模块中将标识符作为自由变量遇到标识符时，就会自动加载该模块，并用已加载模块的导出 （具有此属性的属性，以支持命名的导出） 填充标识符 。