在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文檔（重點是我的）：

自動加載模塊。 每當在模塊中將標識符作為自由變量遇到標識符時，就會自動加載該模塊，並用已加載模塊的導出 （具有此屬性的屬性，以支持命名的導出） 填充標識符 。