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

Question

我知道它很简单，但随着 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 不工作 我已经通过 npm 安装了 jquery 和 bootstrap

原文由 uzaif 发布，翻译遵循 CC BY-SA 4.0 许可协议

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！

原文由 Akash Rajput 发布，翻译遵循 CC BY-SA 4.0 许可协议

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;

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

使用以下说明

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;

原文由 uzaif 发布，翻译遵循 CC BY-SA 4.0 许可协议