javascript - 在已发布的 Web 组件中获取文件的路径

Question

我有一个 web 组件，我需要link在头部添加一个标签并将href等于该节点模块内的文件夹设置。

现在我正处于这个组件的构建阶段，我的结构如下所示：

所以我需要将fontawsome.css脚本添加到页面的头部。我创建了以下脚本：

  constructor() {
    super();
    if (!this.isFontAwesomeLoaded()) {
      this.iclass = '';
      const fontEl = document.createElement('link');
      fontEl.rel = 'stylesheet';    
      fontEl.href = "./fontawesome/css/all.css";
      document.head.appendChild(fontEl);    
    }
  }

现在有一个问题，当它到达标签时路径./fontawesome/css/all.css将不起作用，因为尝试加载它的文件在其项目中没有文件夹。相反，当它点击产品时，它需要找到我的模块的绝对路径，然后找到该文件夹​​。headindex.htmlfontawesome

我的问题是我怎样才能得到那条路？

标签： javascripttypescriptpath

Answer 1

有很多事情应该避免：

1. 来自 web 组件内部的外部依赖是一个坏主意，尤其是像fontawesome. 你说你尽量避免耦合，但实际上你是带着这种依赖来引入它的。
2. Web 组件很少应该在没有 shadow-dom（恕我直言）的情况下使用，通过接受 fontawesome 你基本上忽略了 Web 组件的功能。

有几种方法可以处理这种情况：

1. 从 fontawesome 中提取您需要的内容all.css到您的 Web 组件中。
2. 在组件的文档中声明它依赖于 fontawesome 并且客户端应该在他们身边提供它
3. 使用 CDN（非常糟糕的决定，避免这种情况）：

constructor() {
    super();
    if (!this.isFontAwesomeLoaded()) {
      this.iclass = '';
      const fontEl = document.createElement('link');
      fontEl.rel = 'stylesheet';    
      fontEl.href = "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
      document.head.appendChild(fontEl);    
    }
}