EJSでのWebpackバンドルのバージョン

Question

私はExpressとReactJSでアプリケーションを作成しています。 大きなコンポーネントを分割するために、私は遅延ロードを使用し、ウェブパックでは、ブラウザにバージョン管理を作成し、新しいバージョンを提供するためにクエリにchunkhashを追加しています。 残念ながら私のバンドルファイルはEJSテンプレートで提供されています。私はExpressをバックエンドとして使用していて、単純なスクリプトタグです。

<script src="/build/bundle.js" type="text/javascript" defer></script> 

どのようにEJSテンプレートでバージョン管理を行うことができますか？この場合のベストプラクティスは何ですか？

希望私はばかな質問をしませんでした。

ありがとうございます！

Answer 1

これは完全に実行可能です。一日の終わりに、スクリプトタグは文字列ですよね？

ここでは、 assets-webpack-pluginを使用して、webpackバンドルの出力を含むjsonファイルを作成します。

assets.jsonファイルを作成します。

エクスプレスサーバーを設定するときに、そのファイルを必要とし、それを地元の人に入れてください。 req.locals.assets = require('path/to/assets.json')

これで、文字列タグを作成してテンプレートに含めるだけで済みます。 これを行うには、jsファイルの配列をテンプレートにとり、スクリプトタグを返すejsヘルパーを作成できます。

function renderJSTags(jstags) { 
    let out = ''; 

    _.each(jstags, function (js) { 
     if (typeof js === 'string') { 
      out = out + renderTag({ 
       'name': 'script', 
       'opts': objToKeyval({ 
        'src': js, 
        'nonce': `${_res.locals.nonce}` // you should be using nonce along with good CSP 
       }) 
      }); 
     } else { 
      out = out + renderTag({ 
       'name': 'script', 
       'opts': objToKeyval(js) 
      }); 
     } 
    }); 

    return out; 
} 

function objToKeyval(obj) { 
    return _.map(obj, function (val, key) { 
     return {'key': key, 'val': val}; 
    }); 
} 

function renderTag(obj) { 
    let tag = '<' + obj.name + ' '; 

    _.each(obj.opts, function (opt) { 
     if ((obj.name === 'link' || obj.name === 'script') && 
      (opt.key === 'href' || opt.key === 'src') && 
      !url.parse(opt.val, false, true).host) { 
      opt.val = opt.val; 
     } 

     tag += opt.key + '="' + opt.val + '" '; 
    }); 

    if (obj.selfclose) { 
     tag += '/>'; 
     return tag; 
    } 

    tag += '></' + obj.name + '>'; 

    return tag; 
} 

よう

何かこれは、ルートハンドラの最後のステップ に私たちをもたらし、あなたが渡している、これまでどのようなデータとともにビューにJSタグの配列を渡します。

router.get('/', (req, res, next) => { 
    const assets = req.locals.assets; 

    const payload = { 
     // your data 
     'name' : 'John Doe', 
     'js': [ 
      assets.webpackEntryPoint1.js, 
      assets.webpackEntryPoint2.js, 
     ] 
    } 

    res.render('/path/to/template', payload); 
});