聚合物項目如何投入生產？

Question

使用聚合物構建然後將應用程序部署到用於生產的Web服務器上是否是常識？ 或者是否合理使用聚合物服務/ polyserve作爲Web服務器？

Answer 1

polymer serve的問題是，如果發生故障，它不會重新啓動，使您沒有網站。它的真正用處在於開發，因爲它在您開發單個元素時爲您映射目錄。

另外，你將如何處理Ajax調用？

過去我曾經在PM2中運行過我的代碼（一個定製的節點web服務器）。這些天我運行使用docker，特別是docker-compose如果它失敗也會重新啓動應用程序。

編輯以下是我在fly代碼上的代碼是如何從Google Polymer Teams「Polymer Server」中複製（然後由我更改的）代碼，因此需遵守該項目中給出的許可條件。

* Copyright (c) 2016 The Polymer Project Authors. All rights reserved. 
* This code may only be used under the BSD style license found at 
* http://polymer.github.io/LICENSE.txt 
* The complete set of authors may be found at 
* http://polymer.github.io/AUTHORS.txt 
* The complete set of contributors may be found at 
* http://polymer.github.io/CONTRIBUTORS.txt 
* Code distributed by Google as part of the polymer project is also 
* subject to an additional IP rights grant found at 
* http://polymer.github.io/PATENTS.txt 

該代碼由像這些

const parse5 = require('parse5'); 
    const dom5 = require('dom5'); 
    const LRU = require('lru-cache'); 
    const babelCore = require('babel-core'); 
    const transformLog = require('debug')('web:transform'); 


    const babelTransformers = [ 
    'babel-plugin-transform-es2015-arrow-functions', 
    'babel-plugin-transform-es2015-block-scoped-functions', 
    'babel-plugin-transform-es2015-block-scoping', 
    'babel-plugin-transform-es2015-classes', 
    'babel-plugin-transform-es2015-computed-properties', 
    'babel-plugin-transform-es2015-destructuring', 
    'babel-plugin-transform-es2015-duplicate-keys', 
    'babel-plugin-transform-es2015-for-of', 
    'babel-plugin-transform-es2015-function-name', 
    'babel-plugin-transform-es2015-literals', 
    'babel-plugin-transform-es2015-object-super', 
    'babel-plugin-transform-es2015-parameters', 
    'babel-plugin-transform-es2015-shorthand-properties', 
    'babel-plugin-transform-es2015-spread', 
    'babel-plugin-transform-es2015-sticky-regex', 
    'babel-plugin-transform-es2015-template-literals', 
    'babel-plugin-transform-es2015-typeof-symbol', 
    'babel-plugin-transform-es2015-unicode-regex', 
    'babel-plugin-transform-regenerator', 
    ].map((name) => require(name)); 

    const isInlineJavaScript = dom5.predicates.AND(
    dom5.predicates.hasTagName('script'), 
    dom5.predicates.NOT(dom5.predicates.hasAttr('src'))); 

    const babelCompileCache = LRU({ 
    length: (n, key) => n.length + key.length 
    }); 

    function compileHtml(source, location) { 
    const document = parse5.parse(source); 
    const scriptTags = dom5.queryAll(document, isInlineJavaScript); 
    for (const scriptTag of scriptTags) { 
     try { 
     const script = dom5.getTextContent(scriptTag); 
     const compiledScriptResult = compileScript(script); 
     dom5.setTextContent(scriptTag, compiledScriptResult); 
     } catch (e) { 
     // By not setting textContent we keep the original script, which 
     // might work. We may want to fail the request so a better error 
     // shows up in the network panel of dev tools. If this is the main 
     // page we could also render a message in the browser. 
     //eslint-disable-next-line no-console 
     console.warn(`Error compiling script in ${location}: ${e.message}`); 
     } 
    } 
    return parse5.serialize(document); 
    } 
    function compileScript(script) { 
    return babelCore 
     .transform(script, { 
     plugins: babelTransformers, 
     }).code; 
    } 

    function transform(request, body, isHtml) { 
    const source = body; 
    const cached = babelCompileCache.get(source); 
    if (cached !== undefined) { 
     transformLog('using the cache'); 
     return cached; 
    } 
    if (isHtml) { 
     transformLog('compiling html'); 
     body = compileHtml(source, request.path); 
    } else { 
     transformLog('compiling js'); 
     body = compileScript(source); 
    } 
    babelCompileCache.set(source, body); 
    return body; 
    } 

某些支持功能的肉雖然是有效地插入本身的出流中的中間件捕獲呼出的HTML所有塊和JS文件和將它們轉換如有必要。

function transformResponse(transformNeeded) { 
    return (req, res, next) => { 
     let ended = false; 

     let _shouldTransform = null; 
     let isHtml = true; 

     // Note: this function memorizes its result. 
     function shouldTransform() { 
     if (_shouldTransform == null) { 
      const successful = res.statusCode >= 200 && res.statusCode < 300; 
      if (successful) { 
      const result = transformNeeded(req); 
      isHtml = result.isHtml; 
      _shouldTransform = !!result.transform; 
      } else { 
      _shouldTransform = false; 
      } 
     } 
     return _shouldTransform; 
     } 

     const chunks = []; 

     const _write = res.write; 

     res.write = function(chunk, enc, cb) { 
     if (ended) { 
      _write.call(this, chunk, enc, cb); 
      return false; 
     } 
     if (shouldTransform()) { 
      const buffer = (typeof chunk === 'string') ? new Buffer(chunk,enc) : chunk; 
      chunks.push(buffer); 
      return true; 
     } 
     return _write.call(this, chunk, enc, cb); 
     }.bind(res); 

     const _end = res.end; 
     res.end = function (chunk, enc, cb) { 
     if (ended) 
      return false; 
     ended = true; 
     if (shouldTransform()) { 
      if (chunk) { 
      const buffer = (typeof chunk === 'string') ? new Buffer(chunk,enc) : chunk; 
      chunks.push(buffer); 
      } 
      const body = Buffer.concat(chunks).toString('utf8'); 
      let newBody = body; 
      try { 
      newBody = transform(req, body, isHtml); 
      } catch (e) { 
      //eslint-disable-next-line no-console 
      console.warn('Error', e); 
      } 
      // TODO(justinfagnani): re-enable setting of content-length when we know 
      // why it was causing truncated files. Could be multi-byte characters. 
      // Assumes single-byte code points! 
      // res.setHeader('Content-Length', `${newBody.length}`); 
      this.removeHeader('Content-Length'); 
      return _end.call(this, newBody); 
     } 
     return _end.call(this,chunk, enc, cb); 
     }.bind(res); 
     next(); 
    }; 
    } 

這個程序稱爲transformNeeded這是如下（這是檢測布勞爾位）

function transformNeeded(req) { 
    const pathname = url.parse(req.url).pathname; 
    const isHtml = pathname === '/' || pathname.slice(-5) === '.html'; 
    if (isHtml || pathname.slice(-3) === '.js') { 
    //see if we need to compile as we have a .html or .js file 
    const splitPathName = pathname.split('/'); 
    const isPolyfill = splitPathName.includes('webcomponentsjs') || 
     splitPathName.includes('promise-polyfill'); 
    if (!isPolyfill) { 
     const browser = new UAParser(req.headers['user-agent']).getBrowser(); 
     const versionSplit = (browser.version || '').split('.'); 
     const [majorVersion, minorVersion] = versionSplit.map((v) => v ? parseInt(v, 10) : -1); 
     const supportsES2015 = (browser.name === 'Chrome' && majorVersion >= 49) || 
     (browser.name === 'Chromium' && majorVersion >= 49) || 
     (browser.name === 'OPR' && majorVersion >= 36) || 
     (browser.name === 'Mobile Safari' && majorVersion >= 10) || 
     (browser.name === 'Safari' && majorVersion >= 10) || 
     // Note: The Edge user agent uses the EdgeHTML version, not the main 
     // release version (e.g. EdgeHTML 15 corresponds to Edge 40). See 
     // https://en.wikipedia.org/wiki/Microsoft_Edge#Release_history. 
     // 
     // Versions before 15.15063 may contain a JIT bug affecting ES6 
     // constructors (see #161). 
     (browser.name === 'Edge' && 
      (majorVersion > 15 || (majorVersion === 15 && minorVersion >= 15063))) || 
     (browser.name === 'Firefox' && majorVersion >= 51); 
     requestLog(
     'Browser is %s version %d,%d - supports ES2015? ', 
     browser.name, 
     majorVersion, 
     minorVersion, 
     supportsES2015 
    ); 
     return {transform: !supportsES2015, isHtml: isHtml}; 
    } 
    } 
    return {transform: false, isHtml: isHtml}; 
} 

最後，我必須設置路線之前，我建立Web服務器，然後告訴Web服務器使用我設置的路線。

const Router = require('router'); 
//sets up my API routes 
manager.setRoutes(router); 
router.use('/', transformResponse(this.transformNeeded)); 
router.use('/', staticFiles(clientPath)); 
this._start(router);