web-dev-qa-db-ja.com

Rails 6 webpackerにjqueryサードパーティプラグインを追加する方法

私はその単純なことを知っていますが、Rails 6.の更新により、Rails 6に新しい構文が追加されました。これは、webpackerによって維持されるJavaScriptアセットを管理するためのものです。

//application.js
require("@Rails/ujs") //.start()
require("turbolinks").start()
require("@Rails/activestorage").start()
require('jquery').start()
require('jquery_ujs').start()
require('bootstrap-daterangepicker').start()
require("custom/custom").start()
require("bootstrap").start()
require("channels")

追加できますcustom/customがbootstrapでjqueryが機能していません。jqueryをインストールして、bootstrap npm経由で

javascriptruby-on-railswebpackerruby-on-rails-6
10
uzaif

以下のコマンドを実行してjQueryを追加します。

$ yarn add jquery

以下のコードをconfig/webpack/environment.jsに追加します

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

Application.jsファイルにjqueryが必要です。

require('jquery')

Jquery-Rails gemを追加する必要はもうありません！

14
Akash Rajput

jqueryサードパーティプラグインの問題を解決するには、yarnを介してjqueryを追加してください

yarn add jquery

Rails 6アプリケーションにjqueryサポートを追加するには、最初に以下の設定を追加する必要があります

# app/config/webpack/environment.js
const {environment} = require('@Rails/webpacker');

const webpack = require('webpack');
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery' # or if its not work specify path `'jquery/src/jquery'` which node_modules path for jquery
}));

module.exports = environment;

app/javascripts/packs/application.jsにjquery関連のプラグインをインポートする場合

以下の指示に従ってください

import 'bootstrap/dist/js/bootstrap';
import 'bootstrap-daterangepicker/daterangepicker'

jQueryのexpose-loaderで更新

yarn add expose-loader

次に、これをconfig/webpack/environment.jsに追加します

   environment.loaders.append('jquery', {
      test: require.resolve('jquery'),
      use: [{
        loader: 'expose-loader',
        options: '$',
      }, {
        loader: 'expose-loader',
        options: 'jQuery',
      }],
    });
    module.exports = environment;
6
uzaif