运行下面的命令来添加 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！

解决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;

用于导入任何与 jquery 相关的插件 app/javascripts/packs/application.js

使用以下说明

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

更新expose-loader为 jQuery

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;

显然，expose-loader 1.0.0 有不同的格式：

environment.loaders.append('jquery', {
  test: require.resolve('jquery'),
  rules: [
    {
      loader: 'expose-loader',
      options: {
        exposes: ['$', 'jQuery'],
      },
    },
  ],
});

确保您已安装 yarn 并更新到最新版本，然后创建您的 rails 应用程序。

首先运行以下命令安装Bootstrap、Jquery和Popper.js

yarn add bootstrap@4.5 jquery popper.js

在上面的课程中，您可以更改为最新版本的 Bootstrap。

如果你打开 package.json 文件，你会注意到 Bootstrap 4.5、Jquery 最新版本和 Popper.js 最新版本已经为你添加。

接下来转到 config/webpack/environment.js 并修改文件。

const { environment } = require('@rails/webpacker')
    
const webpack = require("webpack")

environment.plugins.append("Provide", new webpack.ProvidePlugin({

$: 'jquery',

jQuery: 'jquery',

Popper: ['popper.js', 'default']

}))

module.exports = environment

接下来转到 app/assets/stylesheets/application.css 并修改文件确保需要引导程序。

*= require bootstrap

*= require_tree .

*= require_self

最后转到 application.js 文件并通过添加import 'bootstrap';来修改文件，以便引导 javascript 工作。

import 'bootstrap';
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()

保存所有更改，重新启动 rails 服务器。

那应该有效。

在 webpacker v. 6 中没有config/webpack/environment.js和其他文件结构

首先，您需要使用yarn以下命令将 JQuery 添加到您的项目中：

yarn add jquery

之后，您可以使用以下方法之一集成 JQuery：

1. 直接更新基础配置：

// config/webpack/base.js

const { webpackConfig } = require('@rails/webpacker')
const webpack = require('webpack')

webpackConfig.
  plugins.
  push(
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  )

module.exports = webpackConfig

2. 使用自定义配置并将其合并到基本配置：

// config/webpack/base.js

const { webpackConfig, merge } = require('@rails/webpacker')
const customConfig = require('./custom')

module.exports = merge(webpackConfig, customConfig)

// config/webpack/custom.js

const webpack = require('webpack')

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
}

在我看来第二种方式更灵活