knockout.js – 预编译Web组件

我在我的一个项目中使用 web component implementation in knockout.js来抽象我在我的应用程序中重用的UI组件.其中一个组件是一个关于弹出窗口,其中包含我的应用程序上的一堆信息.

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

有人写过一个工具来完成这个吗？或者我应该在Web组件包含大量(关键)内容的情况下使用不同的方法？

解决方法

您可以从节点使用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();
});