如何在Rails 6 Webpacker中添加jQuery第三方插件

Question

我知道这很简单，但是随着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无法使用。 我已通过npm安装了jQuery和Bootstrap。

- uzaif

Answer 1

运行以下命令以添加 jQuery。

run below command to add jQuery.

返回结果:

运行以下命令以添加 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了！

- Akash Rajput

---

为什么你需要使用 $ 和 jQuery？ - truongnm

@truongnm 我们必须全局定义这些变量，这样webpack才能编译打包。 - Alexander Gorg

/config/webpack/environment.js - Nate Flink

将jQuery从管道移动到Webpack后，我收到一个控制台错误“ReferenceError：找不到变量：jQuery”。 - hellion

现在我正在收到重复请求。有什么帮助吗？ - faisal bhatti

Answer 2

为了解决 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'

使用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;

- uzaif

---

除非我执行jQuery: 'jquery/src/jquery'，否则这个不起作用，为什么会这样？ - Arian Faurtosh

@ArianFaurtosh 我认为我们需要在这个部分指定一个源文件路径。 - uzaif

我发现添加 jQuery 第三方插件（我的例子是 'jquery-mask-plugin'）时，按照上述步骤添加 jQuery 和 expose-loader，但是 import 'jquery-mask-plugin' 无法正常工作。在 application.js 中添加 require("jquery-mask-plugin") 却可以正常工作。 - Jack

第一种解决方案出现了“TypeError: Cannot read property 'ProvidePlugin' of undefined”错误。 - Sathish

在我使用的 Rails 6.0.2.2 和 yarn 1.16.0 版本中，第二种采用 expose-loader 的解决方案对我起了作用。 - Sathish

Answer 3

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

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

- Denise Mauldin

Answer 4

在 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

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

// 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'
    })
  ]
}

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

- mechnicov

Answer 5

确保您已安装并更新到最新版本的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并修改文件，确保要求引入bootstrap。

*= require bootstrap

*= require_tree .

*= require_self

最后打开application.js文件，并添加import 'bootstrap';，以使Bootstrap的JavaScript正常工作。

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

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

那应该可以了。

- Elias Glyptis