railsでwebpackerを使わずにparcel + asset pipelineでreactを使う

サンプル

流れ

1. webpacker無しのrailsで良い
2. parcelを通常通り使う
3. javascriptはapp/javascript/packs配下でもどこでも良い
4. parcelの出力先はapp/assets配下へ （例 app/assets/bundled）
5. config/initializers/assets.rbに出力したファイルをprecompileのリストへ追加
6. parcelでコンパイルしたjsファイルは通常通りjavascript_include_tagで呼び出す

例

# これにて app/assets/bundled 配下にファイルが出来る
yarn run parcel app/javascript/packs/hello_world.jsx -d app/assets/bundled

# 続けてサーバー起動
rails s 


# またはproduction環境で
# 5.のprecompileリストへ追加をしているのでparcelでコンパイルしたものも、digest付きファイルは出力される
rails assets:precompile RAILS_ENV=production
rails s -e production 

注意点

assets:precompileの時に普通config/environments/production.rbの

config.assets.js_compressor = :uglifier

で、難読化されるが、uglifiergem自体のバージョンが古いとブラウザでの実行時にエラーが出る事がある。