1

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

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

我需要：

  1. 包括来自 CDN 的 JS 库。到目前为止，我已经通过在 Index.html 页面上引用它来做到这一点。（即<script src="//path/to/cdn/utag.js"></script>）

  2. 从 React 应用程序中的组件引用库。有一个utag带有方法view()的类，link()当在应用程序中按下按钮时我需要调用它。如果我在反应组件中的方法内尝试 utag.link() ，则未定义对象 utag 并且反应将无法编译。

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

谢谢！

4

1 回答 1

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

于 2017-10-02T08:35:15.480 回答