--skip-yarnしたRailsアプリ(プロジェクト)に後からyarnを追加する
TD;TR;
- yarnをスキップするオプションを付加したことを後悔した
- オプションはある程度わかった上でつけるのがbetter(分からないならつけない)
- ggりかたも大事
開発環境
経緯
admin-lte3なる管理画面を使いたくなった - AdminLTE2をRails5.1/yarnで動かす - Qiita- この記事(【Rails入門】YarnでjQueryとBootstrapを使うには！？ | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイトを)参考に実現しようとしたが全くできなかった
ので備忘録。
Railsアプリを作るときに--skip-yarnオプションを付加した
下記の2つの理由からオプションを付加しました。
- 4.2で使った機能があれば十分だと思った
- アプリのパフォーマンスが下がるかもしれない(勝手な憶測)
他にもcoffeescript, turbolinks関連のオプションを付加しています。
後からどうしても欲しくなった
アプリをある程度作っていると管理画面が欲しくなりましたが
- 管理画面を作るのがとても時間がかかりそう
- カスタマイズしやすい管理画面をつくるためのいい感じのgemがなかった
- Rails5.1から追加されたyarnを使えば工数の短縮につながる
という結論に至り後から導入することに決めました。
解決するために
1.完全にハマった
導入しやすそうな記事があったので参考に進めてみたが、全くうまくいかないので色々ggりました - 【Rails入門】YarnでjQueryとBootstrapを使うには！？ | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト
2.とりあえずyarnをインストールする
- yarnは必須なのでDockerfileにリンクを参考にコードを追記して - docker for macでrails × yarn × webpackerのfront環境を整える - Qiita
docker-compose buildを実行してもERROR: Service 'web' failed to build: ADD failed: stat /var/lib/docker/tmp/docker-builder922711295/package.json: no such file or directoryと怒られるのでpackage.jsonを作成してあげる- rails package.json - Google 検索
- Railsで利用するフロントエンドのライブラリをnpmからインストールする - Qiitaを参考に
package.jsonを修正
docker-compose buildを実行 -> yarnをインストールできた!!
3.yarnコマンドでモジュールを追加しても反映されない
これが一番辛かった...
- yarnコマンドで追加してもcssにbootstrapのデザインが反映されない
その他いろいろエラーが出たのですがほぼ覚えていません(m m)
3.ggりかたを変える
反映されない理由が分からずとにかくdokcer rails yarn ~~~ みたいな感じでggってましたが、dockerを外してggってみみると良さげな記事が出てきたので
- guguru1 - rails yarn 追加 - Google 検索
- すると良さげな記事がでてきた - rails に yarn で jquery を導入 | office-aship
- 内容を見てみると下記のような内容だった
- 通常は
node_modulesの中にパッケージが反映される --skip-yarnオプションをつけると- 作成するための設定ファイル
bin/yarnファイルが追加されない config/initializers/assets.rbに必要な記述がされない
- 作成するための設定ファイル
無事解決!!
...とすぐにはならなかった。
- 原因は
bin/yarnファイルにあった- 最初は
bin/yarnファイルを作成、仮で作ったrails5.1からコピペしてきた ->node_modulesフォルダが追加されなかった - 最初は
bin/yarnファイルを仮で作ったrails5.1からドラッグ&ドロップしたら動作するようになった
- 最初は
