如何引用index.html中包含的JavaScript库中的类和方法

我有一个内置于React的SPA。我需要包含一个来自CDN的用于分析的JavaScript库 - 不应该与其他JS库捆绑在一起。如何引用index.html中包含的JavaScript库中的类和方法

到目前为止，我已经了解到，它不是webpack的工作，我应该使用脚本加载器，如scriptjs。我发现这个线程，但我不明白的实施：https://github.com/webpack/webpack/issues/240。

我需要：

包括来自CDN的JS库。到目前为止，我通过在Index.html页面上引用它来完成此操作。（即<script src="//path/to/cdn/utag.js"></script>）
从React应用程序中的组件引用库。有一个类utag与方法view()和link()，我需要在应用程序中按下按钮时调用。如果我在反应组件的方法中尝试utag.link（），则对象utag未定义，反应将无法编译。

如何包含此库以便它可以被我的所有组件访问，以及如何引用我需要的类和方法？

谢谢！

来源

2017-08-30 user1521567

你做得对 - 只要将它包含到你的index.html。其余的依赖于utag库如何导出类。如果它只是定义了全局变量，那么你可以通过window.utag来访问它。 – pinebit

HTML中的脚本引用很好。

Analytics（分析），您可能希望构建一个包装到你的应用程序处理事件和试验的下游功能的可用性，沿着线：

var analytics = { 
    view: function(a,b,c){ 
    if(window.utag && window.utag.view && typeof window.utag.view == "function"){ 
     window.utag.view(a,b,c); 
    } else { 
     // handle lack of Tealium availability here 
    } 
    }, 
    link: function(a,b,c){ 
    if(window.utag && window.utag.link && typeof window.utag.link == "function"){ 
     window.utag.link(a,b,c); 
    } else { 
     // handle lack of Tealium availability here 
    } 
    } 
};

然后，您可以使用analytics.view（）和analytics.link（），并编写代码来处理未加载的Tealium（例如延迟一秒钟，然后进行后续尝试）。

来源

2017-10-02 08:35:15

如何引用index.html中包含的JavaScript库中的类和方法

回答

相关问题