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文档（强调我的）：

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

在React / Webpack中创建全局变量

1 个答案: