現在react.jsとtwigでMPAを作成しようとしている者です。
やりたいことはreact.jsでbuildしたファイルの一覧がmanifest.jsonにjsonデータとして定義されているので
これをBEのtwigファイルからcdnとして読み込みたいのですが、scriptsのsrcからどうやってjsonにアクセスできるのでしょうか?
viteを使用していて、公式ページ通りにやってみたのですがうまくいかなかったので、知っている方いましたらご教授いただけたらです。
多分「ここでの構文は説明用なので、使用しているサーバのテンプレート言語に替えてください」って書いてあるので
twigにあわせた記述に変更すればいけるんじゃ無いかなとは思ってるんですけど、書き方的に大体一緒な気がしてるのですが
https://ja.vitejs.dev/guide/backend-integration.html
ちなみに該当のファイルのフルパス(/front-end/dist/credit/index.tsx.a469dca3.js)をcdnで読んだ際はちゃんと動きます。
ただこの方法だと毎回buildするたびにパスが変わるのでjsonでアクセスしたい感じです
manifest.json
1{ 2 "src/entries/credit/index.tsx": { 3 "file": "credit/index.tsx.a469dca3.js", 4 "src": "src/entries/credit/index.tsx", 5 "isEntry": true, 6 "imports": [ 7 "_jsx-runtime.393ecc90.js" 8 ] 9 }, 10 "src/entries/top/index.tsx": { 11 "file": "top/index.tsx.befdd747.js", 12 "src": "src/entries/top/index.tsx", 13 "isEntry": true, 14 "imports": [ 15 "_jsx-runtime.393ecc90.js" 16 ] 17 }, 18 "_jsx-runtime.393ecc90.js": { 19 "file": "jsx-runtime.393ecc90.js" 20 } 21}
{% extends 'layouts/common.twig' %} {% block head %} <script type="module" src="/front-end/dist/{{ manifest['src/entries/credit/index.tsx].file }}""></script> {% endblock %}
あなたの回答
tips
プレビュー