Rails6/jQuery の履歴(No.1)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• Rails6/jQuery へ行く。
  • 1 (2021-04-08 (木) 02:42:43)
  • 2 (2021-04-08 (木) 02:46:14)
  • 3 (2022-04-12 (火) 00:28:18)

&tag(Rails6/jQuery);

目次†[edit]

関連ページ†[edit]

参考情報†[edit]

• 【Rails6】jQueryがなかなか使い始められない人へ - Qiita

組み込み手順†[edit]

• 以下のコマンドを実行。

  yarn add jquery

• webpackの設定ファイルを編集。jqueryのパスは相対パス指定が必要("jquery"のみだと動かない)。

  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で使う†[edit]

• app/javascript/packs/application.jsを編集し、以下を追加。

  require("@rails/ujs").start()
  require("turbolinks").start()
  require("@rails/activestorage").start()
  require("channels")
  require("jquery")  // ←の1行を追加
  // (後略)
  

• app/javascript/test.jsを作成

  $(function() {
    console.log("test");
  });
  

• application.jsに組み込む。

  require("@rails/ujs").start()
  require("turbolinks").start()
  require("@rails/activestorage").start()
  require("channels")
  require("jquery")
  require("test.js")  // ←の1行を追加