预编译 Web 组件

Question

我在我的一个项目中使用web component implementation in knockout.js 来抽象我在整个应用程序中重用的 UI 组件。其中一个组件是“关于”弹出窗口，其中包含有关我的应用的大量信息。

抽象出这个 About 组件非常适合开发，因为我可以在不同的页面之间重用它，并依靠前端而不是后端的方法来包含它。然而，缺点是搜索引擎优化。我希望所有大型搜索引擎都能看到我的应用程序描述，因此我需要在我的 HTML 中预编译某些 Web 组件以确保所有机器人都能看到它。我认为理想的情况是在我的构建步骤中执行此操作（目前使用 Grunt 构建 btw） - 即。在我的index.html 中内联我的<about-app> 组件的内容。

有没有人写过一个工具来完成这个？还是应该对这些 Web 组件包含大量（关键）内容的场景使用不同的方法？

Answer 1

由于我非常清楚自己要在这里寻找什么，但我找不到它，我实际上继续写了我的第一个 node module 并附带一个 Grunt 任务 - grunt-inline-web-components。

该配置允许您指定 jQuery 样式选择器和模板文件的路径，这些模板文件应该内联在任何匹配的节点中。这是一个基本概念，但足够强大。例如，如果我给想要“预编译”的组件一个critical 的类，那么我可以将它们内联在几个选定的位置。这里有一些代码来说明：

grunt.initConfig({
    inline_web_components: {
        options: {
            components: {
                "about-app": "components/about-app.html",
                "my-component:first": "components/my-component.html",
                "flashy-button.critical": "components/flashy-button.html"
            }
        },
        dist: {
            dist: {
                files: [
                    expand: true,
                    cwd: "app",
                    src: "{,*/}*.html",
                    dest: "dist"
                ]
            }
        },
    },
});

Answer 2

您可以从节点使用 PhantomJS，例如 this answer suggests。

var page = require('webpage').create();  
page.open('http://localhost', function (status) {
    if (status !== 'success') {
        console.log('Unable to access network');
    } else {
        var p = page.evaluate(function () {
            return document.getElementsByTagName('html')[0].innerHTML
        });
        console.log(p);
    }
    phantom.exit();
});