はじめに
学習を始めて間もないです。
間違っていること等ございましたらお知らせください!
気をつけていますが特に用語の使い方が正しくない可能性があります。
一つ前の記事でcloneしてきたアプリ(jQuery導入済み)を、
自分の環境ではきちんと動作するまでこんな手順をふんでいますという紹介です。
(出てきたエラー内容やターミナルの指示に従っているだけなので大したことはしてません)
対象の方
cloneしてrails sしたら色々エラーが出ててわからない!って方
jQueryが正常に動いてたアプリをcloneしたけど新しくcloneした方はなんだかちゃんと動かないって方向け
↑これはかなり限定的かと思われます!
(途中まではjQuery関係ないはず…)
環境
Rails: 6.1.5
Ruby: 2.6.3
Git: 2.32.0
ローカル環境: AWS cloud9
簡単に手順
- rails db:migrate
- webpacker:install
- webpacker:compile
- jQuery使えるように文言足す
- rails s
- サーバー許可文言記述
rails db:migrate
bundle exec rails webpacker:install
※ y/nみたいな記述が出てきます。私はここでy押してます
bundle exec rails webpacker:compile
※後述しています
webpacker:installとwebpacker:compileは少し時間がかかります。
const webpack = require('webpack')
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery',
Popper: 'popper.js'
})
)
rails s
config.hosts << " ~ "
もしくは
config.hosts.clear
詳しく
1.rails db:migrateする
rails db:migrate
migrationファイル(テーブルやカラムに関する情報が入っています)をcloneしてきただけなので、
新しく作ったアプリのデータベースにもテーブル・カラムを追加してあげます。
2. webpackerをインストールします
bundle exec rails webpacker:install
※この際に
上書きしてもいいですか? y/n
みたいなことを聞かれるので私は y エンターキー押してます。
ここで n にしたら4の手順はもしかしたら必要ないのかもしれません。
→追記: n にしてみましたがどっちにしてもjQueryに必要な記述が消えていたので y が無難なのかなと思いました。
3. それをコンパイルする
bundle exec rails webpacker:compile
インストールしたwebpackerをコンパイルしてRailsの中でも使えるように?してます(曖昧です、すみません)
4. 多分上下の2行は元々記載してあると思うので真ん中部分のみ足します。
const { environment } = require('@rails/webpacker')
#ここから
const webpack = require('webpack')
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery',
Popper: 'popper.js'
})
)
#ここまで追加
module.exports = environment
この記述はそれぞれ導入しているものによって違うはずです!
webpacker:installの時 y にするとここの記述だけ上書きされてしまうっぽいのでclone元と同じ記述にしとけば問題ないです。
→追記:そういうことでもないらしい…?よく分っていません。
5. サーバーを立ち上げます。
rails s
6. そうするとサーバーの許可を求められる?ので立ち上げたサーバーに出てくる config ~の部分をいつも通り足します
:
:
config.hosts << " ~ "
end
Rails Tutorialで学びましたが↓の記述でもいけます
:
:
config.hosts.clear
end
最後に
今の所この方法で不具合なく出来ております。
ただ、数回jQueryが動作しなくなったことがあったので解決法をこの記事に書きました。
(↑現状はいつも通りcloneしたらちゃんと動いてるので、原因がよくわかっていません)
ここまでお読みいただきありがとうございました!
何かあればお知らせください。