預編譯Web組件

我在我的一個項目中使用web component implementation in knockout.js，以抽象出我在應用程序中重用的UI組件。其中一個組件是一個關於彈出窗口，其中包含我的應用程序中的一堆信息。預編譯Web組件

摘要這個About組件對於開發很有用，因爲我可以在不同的頁面之間重用它，並且依靠前端而非後端的方法來包含它。但不利的一面是SEO。我希望我的應用程序的描述能夠被所有大型搜索引擎看到，所以我需要在我的HTML中預編譯某些Web組件，以確保所有機器人都能看到它。我認爲最理想的情況是在我的構建步驟中做到這一點（目前使用Grunt構建btw） - 即。在我的index.html中內聯我的<about-app>組件的內容。

有沒有人寫過一個工具來完成這個任務？或者，我應該在Web組件包含許多（關鍵）內容的情況下使用不同的方法？

來源

2014-10-27 fredrikekelund

因爲我是正是我一直在尋找在這裏如此清晰，我找不到它，我居然說幹就幹，寫我的第一node module與隨行步兵的任務 - 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" 
       ] 
      } 
     }, 
    }, 
});

來源

2014-11-10 07:27:48 fredrikekelund

您可以從節點使用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(); 
});

來源

2014-11-04 13:29:39 kzh

感謝您的答案，這看起來像一個很好的解決方案。儘管如此，我現在仍然將問題留給公衆。感覺像這樣的構建工具解決方案最終可能會出現，那麼我會關閉它。 – fredrikekelund 2014-11-06 12:30:23

預編譯Web組件

回答

相關問題