Question

我有一个内置于React的SPA。我需要在CDN中包含一个用于分析的JavaScript库 - 不应该与其他JS库捆绑在一起。

到目前为止，我已经了解到这不是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()。如果我在react组件的方法中尝试utag.link（），则没有定义对象utag，并且react不会编译。

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

谢谢！

Answer 1

HTML中的脚本引用很好。

对于分析，您可能希望在应用程序中构建一个包装器，用于处理下游函数可用性的事件和测试，如下所示：

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（例如，一秒钟延迟，然后进行后续尝试）。

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

1 个答案: