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

我试图构建一个使用Webpack编译TypeScript文件及其所有导入到单个JavaScript文件的JavaScript包。如何将外部HTML文件导入到TypeScript类

这个包的主要目标是根据给定的条件向所有使用包的应用程序吐出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文件中。

来源

2017-03-15 seancdavis

你为什么不尝试一下html-loader

我成功地做了你要完成的任务。下面是我所采取的步骤：

添加html-loader NPM包依赖于使用
```
npm install --save-dev html-loader 
```
添加在您的webpack.config.js配置文件中的条目您的项目，在loaders部分：
```
{ test: /\.html$/, loader: 'html-loader' } 
```

告诉打字稿如何识别require导入。您可以通过添加以下代码来执行到一个新的.ts文件这样的：

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; 
};

假设你有一个名为在项目的根目录template.html HTML模板，你现在可以有下面的代码在你的main.ts源代码，如：
```
var x = require("./template.html"); 
console.log(x); 
```

现在在控制台中，您应该看到（我有）模板的HTML代码。

您可以查看html-loader文档了解加载程序的详细配置。我希望有所帮助。

来源

2017-03-16 13:07:13 Leone

你知道怎么用'导入'来实现吗？ – norekhov

@norekhov似乎不可能：https://stackoverflow.com/questions/36234306/how-to-import-html-fragment-using-es6-syntax-in-typescript – Ngz

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

回答

相关问题