Slide 43
Slide 43 text
新しい作法 SPROCKETS から PROPSHAFT③
Sprockets から Propshaftへ!
● Propshaft + jsbundling-rails + cssbundling-rails
○ JavaScript, CSSのビルドはそれぞれのツールに任せる(下記package.json)
○ rails assets:precompile すると yarn build:css と yarn build が実行され、その後propshaftがアセットを
public/assets にコピーする
● sprockets-rails依存のgemがあったら、その解決が必要…
○ アップデート or fork or 削除
"scripts": {
"build": "npx npm-run-all build:frontend build:serviceworker build:css",
"build:frontend": "npx esbuild ./app/javascript/user/index.ts ./app/javascript/admin/index.ts ./app/webcomponents/index.ts --bundle --minify -
-asset-names=[name]-[hash].digested --chunk-names=[name]-[hash].digested --log-level=info --outdir=app/assets/builds --public-path=/assets --
splitting --inject:react-shim.js --platform=browser --format=esm --target=es6",
"build:serviceworker": "npx esbuild ./app/javascript/serviceworker/index.js --bundle --minify --log-level=info --
outdir=app/assets/builds/javascript/serviceworker/ --public-path=/assets --platform=browser --format=iife",
"build:css": "npx npm-run-all build:css:tailwindcss build:css:sass",
"build:css:tailwindcss": "npx tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css",
"build:css:sass": "npx sass ./app/assets/stylesheets/entrypoints:./app/assets/builds --no-source-map --load-path=node_modules"
},
問題と解決