Rails6/jQuery の履歴ソース(No.1)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• 履歴 を表示
• Rails6/jQuery へ行く。
  • 1 (2021-04-07 (水) 17:42:43)
  • 2 (2021-04-07 (水) 17:46:14)
  • 3 (2022-04-11 (月) 15:28:18)

#author("2021-04-07T08:42:43+00:00","default:src128","src128")
&tag(Rails6/jQuery);
*目次 [#lc695b48]
#contents
*関連ページ [#b403a336]
*参考情報 [#cf7fc130]
-[[【Rails6】jQueryがなかなか使い始められない人へ - Qiita:https://qiita.com/iiyama_makoto/items/940b130fd20540fd70f1]]

*組み込み手順 [#s0205b8f]
-以下のコマンドを実行。
 yarn add jquery
-webpackの設定ファイルを編集。jqueryのパスは相対パス指定が必要("jquery"のみだと動かない)。
#pre{{
const { environment } = require('@rails/webpacker')
//ここから
const webpack = require('webpack')
environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery'
    })
)
//ここまで

module.exports = environment
}}

*webpackerで使う [#fcdfcd0b]
-app/javascript/packs/application.jsを編集し、以下を追加。
#pre{{
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")  // ←の1行を追加
// (後略)
}}
-app/javascript/test.jsを作成
#pre{{
$(function() {
  console.log("test");
});
}}
-application.jsに組み込む。
#pre{{
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
require("test.js")  // ←の1行を追加

}}