如何在rails 6 webpacker中添加jquery第三方插件

Question

我知道这很简单，但随着Rails6的更新，在Rails6中有了新的语法来管理javascript资产，这是由webpacker维护的。

//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

Answer 1

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

Answer 2

要解决jquery第三方插件问题，请通过yarn添加jquery

yarn add jquery

为了在Rails6应用程序中添加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 ment.js中

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

Answer 3

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

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