如何将外部HTML文件导入到TypeScript类中 [英] How to import external HTML files into a TypeScript class
问题描述
我试图构建一个使用 Webpack 编译TypeScript文件和所有它的导入到一个单独的JavaScript文件中。
这个包的主要目标是根据给定的条件向任何使用包的应用程序吐出HTML。
目前，我通过使用模板文字可以很好地工作。但是，理想情况下，我希望将标记移动到单独的HTML模板文件中，这些文件可以通过相关的TypeScript类导入和分析。我假设处理这种情况的最好方法是让Webpack在构建期间将该HTML转换为JavaScript。
不幸的是，这个包必须是框架不可知的，并且可以不会利用Angular或React或类似的东西。
这是否可能，是否值得付出努力？如果是这样，我需要做什么？
以下是我正在做的事情的一个例子：
main.ts
从'./app/header'导入{Header};
（function（）{
new Header（）;
}）（）;
header.html
export class Header {
public el：any;
构造函数（）{
this.el = document.querySelectorAll（'[data-header]'）[0];
this.el.className + ='header';
this.render（）;
$ b $ public render（）{
this.el.innerHTML + =`
< a href =＃class =navbar-brand logo >
< svg viewBox =0 0 578 84width =578height =84>
< use href =assets / svgs / logo-crds.svg＃logo-crds>< / use>
< / svg>
< / a>
`;
$ b $ p
$ b $ p $在这个例子中，我想将我们在 render（）函数中看到的模板到它自己的 header.html 文件中。解决方案为什么不试试 html-loader
我成功地做了你正在努力完成的任务。以下是我采取的步骤：
-
添加 html-loader npm包的依赖项在你的项目中使用
npm install --save-dev html-loader
webpack.config.js 配置文件中添加一个条目，in
加载器部分：
{test：/\.html$ /，loader：'html-loader'}
-
告诉打字稿如何识别需要导入。您可以将以下代码添加到新的 .ts 文件中：
declare var require：{
（path：string）：any;
< T>（path：string）：T;
（paths：string []，callback：（... modules：any []）=> void）：void;
确保：（paths：string []，callback：（require：< T>（path：string）=> T）=> void）=>无效;
};
-
假设您有一个名为 template.html 在您的项目的根目录中，您现在可以在 main.ts 源代码中具有以下代码，如下所示：
var x = require（./ template.html）;
console.log（x）;
现在在控制台中您应该看到我有）您的模板的HTML代码。
您可以查看 html-loader 文档了解加载程序的详细配置。我希望这有助于。
I'm attempting to build a JavaScript package that is using Webpack to compile a TypeScript file and all its imports into a single JavaScript file.
The main goal with this package is to spit out HTML to any application consuming the package, following a given set of conditions.
At the moment, I have this working well by using template literals. But, ideally I would love to move the markup into separate HTML template files that can be imported and parsed by relevant TypeScript classes. I'm assuming the best way to handle this scenario is to have Webpack convert that HTML to JavaScript during the build.
Unfortunately, this package must be framework agnostic, and can't take advantage of Angular or React, or anything like that.
Is this possible and is it worth the effort? If so, what do I need to do?
Here's an exmaple of what I'm doing:
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>
`;
}
}
In this example, I'd like to move the template we see in the render() function into its own header.html file.
解决方案 Why don't you try out html-loader
I successfully did what you are trying to accomplish. Here are the steps I took:
Add the html-loader npm package dependency in your project using
npm install --save-dev html-loader
Add an entry in your webpack.config.js configuration file, in the loaders section:
{ test: /\.html$/, loader: 'html-loader' }
Tell typescript how to recognize require imports. You can do this by adding the following code into a new .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;
};
Assuming you have an html template called template.html in your project's root directory, you can now have the following code in your main.ts source code, as:
var x = require("./template.html");
console.log(x);
Now in the console you should see (as I have) your template's html code.
You can look into the html-loader documentation for detailed configuration of the loader. I hope that helps.
这篇关于如何将外部HTML文件导入到TypeScript类中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
