javascript - 如何在没有 Html-Imports 的情况下打包或导入 Html-Templates

Question

由于 Html-Imports 现在已在 Chrome 中弃用 ( https://www.chromestatus.com/feature/5144752345317376 ) 并将被删除，我想知道有哪些替代方案。

我目前正在使用 Html-Imports 导入 Html-Templates。到目前为止，我只看到两种选择:

• 将所有 HTML 文件捆绑在一个文件中。这也将改善生产中的下载时间，但这会减少封装和模块化。有一个 polymer-bundler 可以通过在单独的 HTML 文件中遍历 HTML 导入语句来完成这项工作。但这意味着，HTML 导入保留在我的代码中，即使它们将来不受任何浏览器支持。
• 使用 XHttpRequests 构建某种模块加载器，并在运行时将模板编织到一个 HTML 文件中。这将保留封装和模块化，但这对我来说有一种难闻的气味，因为我基本上会自己重建 import-Statements。

是否有一种新的普通方式来导入 Html 模板？ (我所说的“ Vanilla ”基本上是指一种不涉及预编译器或 bundler 等其他工具的方法)

Answer 1

HTML Imports 的弃用从根本上改变了资源的加载顺序。自定义元素本质上已经成为脚本优先而不是模板优先。如果您的元素需要模板，请从脚本中加载它。如果没有，那就去上类吧。坦率地说，虽然最初几周我对它很抗拒，但我已经爱上它了。事实证明，加载模板等外部资源并不是那么糟糕。

下面是一些将从外部文件加载 HTML 模板的简单代码:

使用异步/等待:

    async function getTemplate(filepath) {
        let response = await fetch(filepath);
        let txt = response.text();

        let html =  new DOMParser().parseFromString(txt, 'text/html');
        return html.querySelector('head > template');
    }

基于 promise :

    function getTemplate(filepath) {
        return fetch(filepath)
            .then(response => {
                let txt = response.text();
                let html = new DOMParser().parseFromString(txt, 'text/html');

                return html.querySelector('template');
            });
    }   

两者都可以通过以下两种方式调用:

异步/等待:

    let tpl = await getTemplate('path/to/template.html');

promise :

    getTemplate('path/to/template.html')
        .then(function doSomething(tpl) {
            // Put your code here...
        });

生成的代码非常简单，可以通过多种方式轻松实现。事实上，我有一个小的 SuperClass 可以为我处理它，我所有的自定义元素都继承自它。您可以改用 mixin，我过去也这样做过。

困难的工作只是颠倒顺序，即使这样也不是很难，除非您使用 1000 多个组件。它可能只需很少的工作就可以实现自动化。