如何将外部 HTML 文件导入 TypeScript 类

我正在尝试构建一个正在使用的 JavaScript 包Webpack将 TypeScript 文件及其所有导入编译为单个 JavaScript 文件。

该包的主要目标是按照一组给定的条件向任何使用该包的应用程序输出 HTML。

目前，我通过使用模板文字可以很好地实现这一点。但是，理想情况下，我希望将标记移动到单独的 HTML 模板文件中，这些模板文件可以由相关的 TypeScript 类导入和解析。我假设处理这种情况的最佳方法是让 Webpack 在构建期间将该 HTML 转换为 JavaScript。

不幸的是，这个包必须与框架无关，并且不能利用 Angular 或 React 或类似的东西。

这可能吗？值得付出努力吗？如果是这样，我需要做什么？

这是我正在做的一个例子：

main.ts

import { Header } from './app/header';

(function(){
  new Header();
})();

header.html

export class Header {

  public el: any;

  constructor() {
    this.el = document.querySelectorAll('[data-header]')[0];
    this.el.className += 'header';

    this.render();
  }

  public render() {
    this.el.innerHTML += `
      <a href="#" class="navbar-brand logo">
        <svg viewBox="0 0 578 84" width="578" height="84">
          <use href="assets/svgs/logo-crds.svg#logo-crds"></use>
        </svg>
      </a>
    `;
  }
}

在此示例中，我想移动我们在render()发挥其自身功能header.html file.

你为什么不尝试一下html加载器

我成功地完成了您想要完成的任务。以下是我采取的步骤：

1. Add the html-loader项目中的 npm 包依赖项使用

   npm install --save-dev html-loader
   

2. 在您的webpack.config.js配置文件，在loaders部分：

   { test: /\.html$/, loader: 'html-loader' }
   

3. 告诉 typescript 如何识别require进口。您可以通过将以下代码添加到新的.ts file:

   declare var require: {
       (path: string): any;
       <T>(path: string): T;
       (paths: string[], callback: (...modules: any[]) => void): void;
       ensure: (paths: string[], callback: (require: <T>(path: string) => T) => void) => void;
   };
   

4. 假设你有一个名为的 html 模板template.html在项目的根目录中，您现在可以在您的项目中包含以下代码main.ts源代码，如：

   var x = require("./template.html");
   console.log(x);
   

现在在控制台中您应该看到（正如我所看到的）模板的 html 代码。

您可以查看html加载器加载器详细配置的文档。我希望这有帮助。