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

Question

我知道它很简单，但是随着rails 6的更新。rails6中有新的语法来管理由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但引导程序和jquery无法正常工作我已经通过npm安装了jquery和引导程序

Answer 1

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

Answer 2

运行以下命令以添加jQuery。

$ yarn add jquery

在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！