在已发布的 Web 组件中获取文件的路径答案

【问题标题】：Getting path to file in published webcomponent在已发布的 Web 组件中获取文件的路径
【发布时间】：2020-09-25 10:23:13
【问题描述】：

我有一个 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 在遇到head 标记时将不起作用，因为尝试加载它的index.html 文件在其项目中没有该文件夹。相反，当它点击产品时，它需要找到我的模块的绝对路径，然后找到fontawesome 文件夹。

我的问题是如何获得这条路径？

【问题讨论】：

你使用的是纯javascript吗？或者你在使用某种框架，比如 jquery、node.js...？
@tschomacker 如果这很重要，我正在使用打字稿:)
你在使用裸 TypeScript（没有框架？）。另外，您使用什么作为构建过程？
只需将fontawesome 文件夹移动到您的assets 或public 文件夹或您正在服务的任何文件夹。然后在您的脚本中使用从index.html 到您要加载的文件的相对路径。
@YuriyKravets 这会起作用，但是我正在创建一个 Web 组件，它应该能够在所有页面上使用而无需耦合

标签： javascript typescript path

【解决方案1】：

有很多事情应该避免：

web-component 内部的外部依赖是个坏主意，尤其是像fontawesome 这样的大项目。你说你尽量避免耦合，但实际上你是带着这样的依赖引入的。
Web 组件很少应该在没有 shadow-dom (IMHO) 的情况下使用，通过接受 fontawesome，您基本上会忽略 Web 组件的功能。

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

从 fontawesome 的 all.css 中提取您需要的内容到您的网络组件中。
在您的组件的文档中声明它依赖于 fontawesome，并且客户应该在他们身边提供它
使用 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);    
    }
}

【讨论】：