Yukimarupie commented 3 years ago

LIFFのメソッドを使用する際、ほぼ確実にliff.initとliff.login();のコードが必要になる。なので、よりDRYな実装をするため、必須のJS処理をモジュール化し、必要に応じて読み込む形を取りたかった。が、過程で以下のようなことが起こり、結論、現在の開発環境・私の能力を考慮見て、DRYな実装を諦めることにした。

①LIFFログイン&ユーザー情報取得の為のモジュールをexportするためのmodule_test.jsを作成=>targetpicker.jsで読み込み。new.html.erbの<%= javascript_pack_tag ‘letters/login’ %>パスを、モジュール読み込んでるtargetpicker.jsに通したところ、エラー(Webpacker::Manifest::MissingEntryError in Letters#new)が出た

③エラー文で一応ググり、どうやらwebpack周りが怪しいというところまではたどり着いたが、再度パスを‘letters/login’ に直すと、また認証&プロフィール情報の表示ができたのでモジュール化に失敗しているか、読み込みに失敗しているか、targetpicker.jsの実装が間違っていることが原因だと仮定した。

④どれが原因を調べるために、login.jsにtargetpicker.jsの実装を丸々コピペして動作を確認したところ、認証が走った。ということはtargetpicker.jsの実装のせいではないと仮定した。

⑤メンターさんに質問し、読み込みの仕方・モジュール化の仕方が間違ってないか聞いたが、間違ってない&メンターさんのRailsアプリ(LIFFとの連携はなし)を起動して同様のモジュール化&読み込みをしてみると、きちんと動作することが発覚した。

⑥とすると、やはりtargetpicker.jsのせいかなと思い、再度login.jsにtargetpicker.jsの実装をコピペしてみた。今度は念のためdockerの再起動&ブラウザのキャッシュ削除を実施した。すると、③の時点では認証&プロフィール情報の表示ができたのにも関わらず、今度は認証後プロフィール情報の表示ができなくなった。consoleのobjectの中身を確認すると、JWSエラーが出ていた。

⑦なんでだ！勘弁しろ！と思い、きちんとプロフィール情報の表示ができていた時点までgit checkout .で戻した。docker再起動&ブラウザのキャッシュ削除を実行してから挙動を確認すると、きちんと③と同じ挙動になった

⑧再度new.html.erbの<%= javascript_pack_tag ‘letters/login’ %>パスを、モジュール読み込んでるtargetpicker.jsに通したが、やはり同様のエラーが出た。

⑨パスを‘letters/login’ に戻し、login.jsの実装を再度targetpicker.jsと同様にした。やはり認証&プロフィールの表示ができることを再度確認

➓login.jsの実装を全て削除してみたらどうなるんだろうと思い、login.jsの実装を全て削除してみた。すると、⑨と全く同じ挙動になることを確認した。え？？笑なんで？？

Yukimarupie commented 3 years ago

となったところで、その状況を別のメンターさんに相談したところ、

・一方でできて一方ではできないというような挙動をする場合、大抵設計周りが怪しいことが多い。

・現在のdocker-compose.ymlではwebpackの環境できてないから、それなのにモジュール読み込むES6の書き方をしようとしてるのが原因ではないか

・webpack-dev-serverコマンドは詰まっちゃうだろうからwebpack serveとかの手動コンパイルをしてみるか、もしくはDRYな書き方を諦めるのも手

と教えていただいた。

なるほど。一応自分でも色々調べてみたが、やはりDRYな実装を諦めるが一番簡単な手な気がしたので、さくっと今回は諦めることにした。

https://qiita.com/10mi8o/items/2477f2640291f0ce6687

Yukimarupie commented 3 years ago

と思ったが、やはりwebpackを環境にインストールしないことには、login.js以外のファイルが読み込まれないことが発覚した。 app/javascript/packs配下に、何も書いてないtest.jsを作成&new.html.erbで読み込んだが、全く同様のエラーがでた。

Webpacker can't find letters/test.js in /app/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
  "application.js": "/packs/js/application-e0b08808587a244fccb3.js",
  "application.js.map": "/packs/js/application-e0b08808587a244fccb3.js.map",
  "entrypoints": {
    "application": {
      "js": [
        "/packs/js/application-e0b08808587a244fccb3.js"
      ],
      "js.map": [
        "/packs/js/application-e0b08808587a244fccb3.js.map"
      ]
    },
    "letters/login": {
      "js": [
        "/packs/js/letters/login-12426d3f343bb4c84251.js"
      ],
      "js.map": [
        "/packs/js/letters/login-12426d3f343bb4c84251.js.map"
      ]
    }
  },
  "letters/login.js": "/packs/js/letters/login-12426d3f343bb4c84251.js",
  "letters/login.js.map": "/packs/js/letters/login-12426d3f343bb4c84251.js.map"

Yukimarupie commented 3 years ago

ここで、acks/letters配下にあるからダメなのではと思い、packs配下にnotletters.jsを作成し、パスを繋いでみたが、やはりエラー内容は変わらなかった。

Yukimarupie commented 3 years ago

DRYな実装を諦めたら、webpackに対応しなくていいかと思ったが、これはちょっとwebpackの環境作らないと、今後新規JS作れないみたい... LIFF_IDを環境変数で呼び出すために、config/webpack/environments.jsの設定をいじったのも原因かもしれない。

ということで、自分で頑張ってみる。

Yukimarupie commented 3 years ago

とりあえずエラー文的は、webpacker.ymlのコンパイルの値をtrueにしないとダメ。それかwebpack -w か the webpack-dev-server.を使え。と言われている。

config/配下にあるwebpacker.ymlを確認する。

development:
  <<: *default
  compile: true

developmentもtestも既にconpile: trueになってる...

productionのみfalseになっている..


production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

開発環境で怒られているのだが、なぜtrueになっているのにダメなんだろうか..

Yukimarupie commented 3 years ago

webpackについてはほんわりとしか理解していなかったんだけれども、ちゃんと勉強しないとダメだな。。

役割については以下サイトが一番わかりやすい気がしたので引用する↓

https://ics.media/entry/12140/

webpackとはウェブコンテンツを構成するファイルをまとめてしまうツールです。一番多い使い方は、複数のJavaScriptを1つにまとめることでしょう。複数のJavaScriptをまとめるのは、いろんな利点があります。

複数JSをまとめられるメリット①転送の最適化複数JSをまとめられるメリット②モジュールが使える複数JSをまとめられるメリット③JSだけでなく、CSSや画像もバンドルできる複数JSをまとめられるメリット④包括的な開発環境が整う

① 転送の最適化

HTTP/1.1接続ではブラウザとウェブサーバーの同時接続数が限られるため、複数のファイルの転送に時間がかかります。複数のJSファイルを1つにまとめてしまうことが一般的な解決案として知られている。=> サイトの高速化に役立つ

②モジュールが使える

まぁこれはやろうとしてたこと。複数のJSファイルを1つにまとめるだけなら他のツールでもできますが、webpackの場合は標準仕様のES Modulesが使えたり、node_modulesのモジュールを結合できるといったメリットがあります。

標準のES Modulesを使うと変数の競合やグローバル汚染を防げるので開発時の安全性が高まります。さらには、コードの可読性が上がり、開発作業の分担やテストがしやすくなり、再利用性や保守性があがります。

③JSだけでなく、CSSや画像もバンドルできる

webpackはJavaScriptだけでなくスタイルシートや画像までもバンドルできてしまうのです。先述の転送の最適化につながるメリット

④包括的な開発環境が整う

JSファイルの圧縮やソースマップに対応していたり、ローカルサーバーの起動まで包括的な制作環境としての機能まであります。タスクランナーのGulpやnpm scriptsだけでは、ツールの組み合わせが無限。「オレが数々の案件で作り込んだ秘伝のタレ」のように、設定ファイルが煩雑化しがちです。webpackであれば、はじめから最後までwebpack一式でツールを揃えられます。このあたりが、イマドキのフロントエンドエンジニアのツールと言われる所以ゆえんです。

webpackを導入しておけばフロントエンドエンジニアに必要な技術がひととおり揃う、ということが最大の利点でしょう。

Yukimarupie commented 3 years ago

うん、大体理解できた。とりあえず諸々面倒臭いことをやってくれてサイトの高速化に役立つし、開発に便利やでって感じですよね。 Gulpなどのタスクランナーでできることは大抵webpackで代替できるらしい。

ただこれ、だいぶ前に他のフロントエンジニアの方に聞いた時、 Gulpもwebpackも別に使う必要ないよーーって言われたような気がしたから、正直放置してた問題である。

ここに時間取られたくないなーーと思いつつ、もう少しだけ調査を進める。

Yukimarupie commented 3 years ago

Railsのwebpackerを使うと、色々面倒になったりもするらしい。場合によっては採用しないのも手だとか

調べていて少し気になったのでメモとして残す。 webpackとgemのwebpackerだと、少し違うらしい。勉強しなければならないことが増えるとか。

引用元: Steb by Step で剥がす Webpacker

Webpackerを使っている Rails アプリからWebpackerを剥がし、webpackを使うようにするための手順を書いていく。

Webpackerを止めたい理由は様々だが、主な理由は以下のような感じだろうか。

・現時点ではWebpackerが使用しているwebpackのバージョンは3.xで、最新バージョンに追従できていない・webpackの設定の他に、「Webpackerの設定」について学ばなければならず、無駄が多い・webpackを直接触れば済む話を、常にWebpackerという仲介者を通して作業しなければならない・カスタマイズやマイグレーションの際に、考慮しなければならない要素が増えてしまう

手軽にフロントエンド開発環境を導入できる、というのがWebpackerの利点であり、カスタマイズやらアップデートやらが必要になってしまうのならあまりメリットはない、と個人的には感じている。

Yukimarupie commented 3 years ago

webpacker.ymlの設定方法あれこれについて

以下のサイトは英語だが、結構 source_pathとか、source_entry_pathの設定方法について、詳しく書かれている。

引用元: Understanding webpacker.yml

The webpacker.yml config file does not work with ERB as is typical with other Rails YAML config files, since the file must also be read in JavaScript. This may come as a surprise as indicated by recent issues, e.g. #1615, #956. One possible workaround is to use one of the supported ENV var overrides. It may also be an option to manipulate the JavaScript config in one of the config/webpack JavaScript files—look for a future post on the subject.

ERBではうまく反映されない？？ってこと？？

Yukimarupie commented 3 years ago

docker-compose.ymlを書き直すか、webpack-dev-serverコマンドを頑張るか、webpack serveとかの手動コンパイルするか??

・現在のdocker-compose.ymlではwebpackの環境できてないから、それなのにモジュール読み込むES6の書き方をしようとしてるのが原因ではないか・webpack-dev-serverコマンドは詰まっちゃうだろうからwebpack serveとかの手動コンパイルをしてみるか、もしくはDRYな書き方を諦めるのも手

調べても調べてもようわからんーー ebpack-dev-serverがオワコンになってたのでwebpack-serveに置換えたらwebpack-serveがオワコンになってwebpack-dev-serverが復活した

とりあえずもしdocker-compose.ymlの設定書き直してビルドしなおせばいいならそれがいい。

Yukimarupie commented 3 years ago

ただのめも

RAILS_ENV=production bundle exec rails webpacker:compile https://bityl.co/6gsfより

なんていうか問題の切り分けができない。

Yukimarupie commented 3 years ago

https://qiita.com/naokit-dev/items/99225bf3d8665ecfdec2

後これは今の問題と直接関係ないけど bundle installの-j4オプションでbundle installが高速化ができる、不要ファイルの削除とイメージの軽量化のため"alpine"を使用するとコンテナの軽量化ができるっぽい。軽量化してどうすんのって感じだけど。


#　不要ファイル削除
RUN rm -rf /usr/local/bundle/cache/* /usr/local/share/.cache/* /var/cache/* /tmp/* && \
apk del build-packs
``

Yukimarupie commented 3 years ago

ようさんとzoomしてやったこと記録

Yukimarupie commented 3 years ago

% docker container exec -it project_file_web_1 bash でdockerコンテナの中入る、

% docker container exec -it bash

"docker container exec" requires at least 2 arguments. See 'docker container exec --help'.

Usage: docker container exec [OPTIONS] CONTAINER COMMAND [ARG...]

Run a command in a running container yk_h@YukinoMacBook-Pro project_file % docker-compose ps Name Command State Ports

project_file_db_1 docker-entrypoint.sh --def ... Up 0.0.0.0:3307->3306/tcp, 33060/tcp project_file_web_1 entrypoint.sh bash -c rm - ... Up 0.0.0.0:3000->3000/tcp
yk_h@YukinoMacBook-Pro project_file % docker container exec -it project_file_web_1 bash

root@b8c0e7dd0f3c:/app# yarn -v 1.22.5 root@b8c0e7dd0f3c:/app# bin/webpack /app/node_modules/webpack-cli/bin/cli.js:93 throw err; ^

Error: Cannot find module 'dotenv' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15) at Function.Module._load (internal/modules/cjs/loader.js:562:25) at Module.require (internal/modules/cjs/loader.js:692:17) at require (/app/node_modules/v8-compile-cache/v8-compile-cache.js:159:20) at Object. (/app/config/webpack/environment.js:3:16) at Module._compile (/app/node_modules/v8-compile-cache/v8-compile-cache.js:192:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) at Module.require (internal/modules/cjs/loader.js:692:17) at require (/app/node_modules/v8-compile-cache/v8-compile-cache.js:159:20) at Object. (/app/config/webpack/development.js:3:21) at Module._compile (/app/node_modules/v8-compile-cache/v8-compile-cache.js:192:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) at Module.require (internal/modules/cjs/loader.js:692:17) at require (/app/node_modules/v8-compile-cache/v8-compile-cache.js:159:20) at WEBPACK_OPTIONS (/app/node_modules/webpack-cli/bin/utils/convert-argv.js:114:13) at requireConfig (/app/node_modules/webpack-cli/bin/utils/convert-argv.js:116:6) at /app/node_modules/webpack-cli/bin/utils/convert-argv.js:123:17 at Array.forEach () at module.exports (/app/node_modules/webpack-cli/bin/utils/convert-argv.js:121:15) at yargs.parse (/app/node_modules/webpack-cli/bin/cli.js:71:45) at Object.parse (/app/node_modules/yargs/yargs.js:576:18) at /app/node_modules/webpack-cli/bin/cli.js:49:8 at Object. (/app/node_modules/webpack-cli/bin/cli.js:366:3) at Module._compile (internal/modules/cjs/loader.js:778:30) root@b8c0e7dd0f3c:/app#

Yukimarupie commented 3 years ago

なぜgemでdotenvが入ってるのにこのエラーが出るの？

/app/node_modules/webpack-cli/bin/cli.js:93

node_modulesはJSのライブラリを管理するやつ。 JSのライブラリの中にdotenvがないよと言われているので、gemとは無関係。

スタックとレースの読み方は下からがスタートなので、docker環境にdotenvをインストールする。。

root@b8c0e7dd0f3c:/app# yarn add dotenv yarn add v1.22.5 [1/4] Resolving packages... [2/4] Fetching packages... info fsevents@2.3.2: The platform "linux" is incompatible with this module. info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation. info fsevents@1.2.13: The platform "linux" is incompatible with this module. info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... warning " > webpack-dev-server@3.11.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0". warning "webpack-dev-server > webpack-dev-middleware@3.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0". [4/4] Building fresh packages... success Saved lockfile. success Saved 1 new dependency. info Direct dependencies └─ dotenv@8.4.0 info All dependencies └─ dotenv@8.4.0 Done in 35.10s. root@b8c0e7dd0f3c:/app# bin/webpack Hash: 5529ff341b36c0fb3723 Version: webpack 4.46.0 Time: 1652ms Built at: 05/05/2021 1:05:21 PM Asset Size Chunks Chunk Names js/application-e0b08808587a244fccb3.js 71.4 KiB application [emitted] [immutable] application js/application-e0b08808587a244fccb3.js.map 80 KiB application [emitted] [dev] application js/letters/login-7fcf20257e521d388cce.js 6.01 KiB letters/login [emitted] [immutable] letters/login js/letters/login-7fcf20257e521d388cce.js.map 6.06 KiB letters/login [emitted] [dev] letters/login js/notletters-f9fe5a9170626939700d.js 3.89 KiB notletters [emitted] [immutable] notletters js/notletters-f9fe5a9170626939700d.js.map 3.52 KiB notletters [emitted] [dev] notletters manifest.json 1.02 KiB [emitted]
Entrypoint application = js/application-e0b08808587a244fccb3.js js/application-e0b08808587a244fccb3.js.map Entrypoint letters/login = js/letters/login-7fcf20257e521d388cce.js js/letters/login-7fcf20257e521d388cce.js.map Entrypoint notletters = js/notletters-f9fe5a9170626939700d.js js/notletters-f9fe5a9170626939700d.js.map [./app/javascript/channels sync recursive _channel.js$] ./app/javascript/channels sync _channel.js$ 160 bytes {application} [built] [./app/javascript/channels/index.js] 211 bytes {application} [built] [./app/javascript/packs/application.js] 435 bytes {application} [built] [./app/javascript/packs/letters/login.js] 2.11 KiB {letters/login} [built] [./app/javascript/packs/notletters.js] 0 bytes {notletters} [built] [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 552 bytes {application} [built]

2 hidden modules root@b8c0e7dd0f3c:/app#

が、変わらん

Yukimarupie commented 3 years ago

手動コンパイルはdockerの中入ってbin/railsコマンド叩けばできる！

% docker container exec -it project_file_web_1 bash

root@00ebb999755e:/app# bin/webpack Hash: b9ba2098ed66676189f8 Version: webpack 4.46.0 Time: 1481ms Built at: 05/05/2021 1:18:09 PM Asset Size Chunks Chunk Names js/application-e0b08808587a244fccb3.js 71.4 KiB application [emitted] [immutable] application js/application-e0b08808587a244fccb3.js.map 80 KiB application [emitted] [dev] application js/letters/login-7fcf20257e521d388cce.js 6.01 KiB letters/login [emitted] [immutable] letters/login js/letters/login-7fcf20257e521d388cce.js.map 6.06 KiB letters/login [emitted] [dev] letters/login js/letters/notletters-35eb071fce92e8568b83.js 3.93 KiB letters/notletters [emitted] [immutable] letters/notletters js/letters/notletters-35eb071fce92e8568b83.js.map 3.54 KiB letters/notletters [emitted] [dev] letters/notletters manifest.json 1.08 KiB [emitted]
Entrypoint application = js/application-e0b08808587a244fccb3.js js/application-e0b08808587a244fccb3.js.map Entrypoint letters/login = js/letters/login-7fcf20257e521d388cce.js js/letters/login-7fcf20257e521d388cce.js.map Entrypoint letters/notletters = js/letters/notletters-35eb071fce92e8568b83.js js/letters/notletters-35eb071fce92e8568b83.js.map [./app/javascript/channels sync recursive _channel.js$] ./app/javascript/channels sync _channel.js$ 160 bytes {application} [built] [./app/javascript/channels/index.js] 211 bytes {application} [built] [./app/javascript/packs/application.js] 435 bytes {application} [built] [./app/javascript/packs/letters/login.js] 2.11 KiB {letters/login} [built] [./app/javascript/packs/letters/notletters.js] 0 bytes {letters/notletters} [built] [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 552 bytes {application} [built]

2 hidden modules

Yukimarupie commented 3 years ago

Dockerfileをいじっておく。 docker消すとまたyarn add dotenvしないといけないので

RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \ echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \ apt-get update -qq && \ apt-get install -y --no-install-recommends \ build-essential \ nodejs \ yarn && \ yarn add dotenv && \

Yukimarupie commented 3 years ago

そもそもなぜローカルにRailsをインストールすると汚れるのか

このバージョンでやってるつもりだったけど、実際は違うバージョンでやってた！みたいなことを防止するため。

Yukimarupie commented 3 years ago

これでrbenvでインストールできるバージョン % rbenv install -l 2.6.7 2.7.3 3.0.1 jruby-9.2.17.0 mruby-3.0.0 rbx-5.0 truffleruby-21.1.0 truffleruby+graalvm-21.1.0

Only latest stable releases for each Ruby implementation are shown. Use 'rbenv install --list-all / -L' to show all local versions.

今ローカルにあるバージョン yk_h@YukinoMacBook-Pro project_file % rbenv versions system 3.0.0

3.0.1 (set by /Users/yk_h/Desktop/puffshare/project_file/.ruby-version)

Yukimarupie commented 3 years ago

↓でデフォルトのバージョン切り換え % rbenv global 3.0.1

Yukimarupie commented 3 years ago

切り替えができたのでgem install rails 6.1.3.1でインストール今回はrailsっていう頻繁に使うgemなので、ローカルにインストールしてもおk。

Homebrew

Macのライブラリをいい感じに管理してくれるやつ

rbenv

Rubyのバージョン管理してくれるやつ

bundler

Rubyのライブラリを管理してくれるgem

bundle install

gemfileに書いたものをもとに、そのプロジェクトに必要なライブラリを依存関係などを考慮していい感じに入れてくれる

Yukimarupie commented 3 years ago

rails --versionで出ない。

An error occurred while installing mysql2 (0.5.3), and Bundler cannot continue. Make sure that gem install mysql2 -v '0.5.3' --source 'https://rubygems.org/' succeeds before bundling.

Yukimarupie commented 3 years ago

Vueを使うメリット

・jQueryとかでDOMを操作するとブラウザが重くなりがち・それほどDOMをいじらなくていいならjQueryでいいよね。・でもやっぱりアニメーションとかでDOM操作するならVueとかReact使った方がいいよねという話

Yukimarupie commented 3 years ago

dockerのメリット

Dockerにバージョンとかを書いてれば、そのバージョンと全く同じrailsにローカルにインストールして、 rails db:create=> db:migrateすれば、 Dockerコンテナ上で動かしていたアプリがローカルでも動かせるようになるよ。

Yukimarupie commented 3 years ago

もし、login.jsを全コメントアウトしても認証が走る事態が起きたら、

対処法１ dockerコンテナに入って、vimかcatで対象ファイル(new.html)を見てみて、本当にその差分が反映されてるか見てみる

・dockerコンテナに入って、bin/webpackコマンドを叩いて、ビルド

・ローカルでbin/webpackでビルド

Yukimarupie commented 3 years ago

herokuにpushした後、db:migrateしたらエラー解消するよ

https://qiita.com/params_bird/items/3d503b5c9f8097df147a

Yukimarupie commented 3 years ago

JSのデバック方法

逐次console.log(変数);を入れ込み、どの時点でどの変数はきちんと取得できているのかブラウザの検証ツールで検証する

Yukimarupie / puffshare

JSのモジュール化ができない。その過程で現在の環境ではwebpackに対応してないことが発覚した。 #7

・一方でできて一方ではできないというような挙動をする場合、大抵設計周りが怪しいことが多い。

・現在のdocker-compose.ymlではwebpackの環境できてないから、それなのにモジュール読み込むES6の書き方をしようとしてるのが原因ではないか

・webpack-dev-serverコマンドは詰まっちゃうだろうからwebpack serveとかの手動コンパイルをしてみるか、もしくはDRYな書き方を諦めるのも手

① 転送の最適化

②モジュールが使える

③JSだけでなく、CSSや画像もバンドルできる

④包括的な開発環境が整う

Railsのwebpackerを使うと、色々面倒になったりもするらしい。場合によっては採用しないのも手だとか

webpacker.ymlの設定方法あれこれについて

ERBではうまく反映されない？？ってこと？？

docker-compose.ymlを書き直すか、webpack-dev-serverコマンドを頑張るか、webpack serveとかの手動コンパイルするか??

Run a command in a running container yk_h@YukinoMacBook-Pro project_file % docker-compose ps Name Command State Ports

Homebrew

rbenv

bundler

bundle install