如何向IE 11提供不同的Web組件

我已經配置了我的「聚合體內部版本」（2.0版）來爲ES11版本轉換ES5版本，但現在我只需要爲IE 11用戶提供該版本，所有其他瀏覽器的ES6版本。達到此目的的最佳方式是什麼？如何向IE 11提供不同的Web組件

理想情況下，我想只使用一個導入在任何客戶端頁面使用我的自定義元素，並在服務器上有一些邏輯來提出適當的版本，但作爲Web組件的新手，我不想推出我自己的解決方案（這可能是討厭的），如果有一個「正確的方式」做到這一點（迄今我還沒有找到它，但我會繼續搜索）。

謝謝。

來源

2017-06-23 Rainier Wolfcastle

這完全取決於你的服務器是什麼使用...例如聚合物服務在「服務器」級別進行，例如它發送相同的文件不同於舊的瀏覽器... 但你也可以建立和動態創建不同的HTML（導入形式不同的路徑）所以問題是什麼將您的服務器環境？ – daKmoR

我的服務器環境絕對不是「聚合物服務」:-)我相信我們會使用Node或Apache。我希望有一種平臺中立的「最佳實踐」，用於向不同的瀏覽器提供服務（元素本身中的某種簡單邏輯，然後通過HTML中的一條import語句重定向到ES5或ES6，也許我夢想太多了。 –

您應該使用能夠檢測瀏覽器功能的網絡服務器。

聚合物團隊本身已經發布了一個nodeJS庫，它讀入您的polymer.json文件並查看您的構建目錄並根據客戶端瀏覽器支持的功能提供正確的構建。服務器本身也支持H2 Push，這是一個很好的功能。

https://github.com/Polymer/prpl-server-node

這是我建立在polymer.json配置。它爲每個功能生成不同的版本。我交叉檢查，哪些版本的瀏覽器支持這些技術，併爲每個neccecary組合添加了構建版本。

"builds": [{ 
    "name": "none", 
    "browserCapabilities": [], 
    "addServiceWorker": true, 
    "bundle": true, 
    "swPrecacheConfig": "sw-precache-config.js", 
    "insertPrefetchLinks": true, 
    "js": { 
    "minify": true, 
    "compile": true 
    }, 
    "css": {"minify": true}, 
    "html": {"minify": true} 
}, 
{ 
    "name": "noes6", 
    "browserCapabilities": ["push", "serviceworker"], 
    "addServiceWorker": true, 
    "addPushManifest": true, 
    "swPrecacheConfig": "sw-precache-config.js", 
    "insertPrefetchLinks": true, 
    "js": { 
    "minify": true, 
    "compile": true 
    }, 
    "css": {"minify": true}, 
    "html": {"minify": true} 
}, 
{ 
    "name": "nopush", 
    "browserCapabilities": ["es2015", "serviceworker"], 
    "addServiceWorker": true, 
    "swPrecacheConfig": "sw-precache-config.js", 
    "insertPrefetchLinks": true, 
    "bundle": true, 
    "js": {"minify": true}, 
    "css": {"minify": true}, 
    "html": {"minify": true} 
}, 
{ 
    "name": "all", 
    "browserCapabilities": ["es2015", "push", "serviceworker"], 
    "addServiceWorker": true, 
    "addPushManifest": true, 
    "swPrecacheConfig": "sw-precache-config.js", 
    "js": {"minify": true}, 
    "css": {"minify": true}, 
    "html": {"minify": true} 
}]

和一個簡單的Express服務器，它利用PRPL服務器庫差分服務（裸記住，這是ES6語法）：

const prpl = require('prpl-server'); 
const express = require('express'); 
const config = require('./build/polymer.json'); 

const app = express(); 

app.get('/*', prpl.makeHandler('./build/', config)); 

app.listen(process.env.PORT || 80);

來源

2017-07-04 11:31:50

如何向IE 11提供不同的Web組件

回答

相關問題