如何將外部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類

回答

相關問題