如何在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但引導程序和 jquery 不工作我已經通過 npm 安裝了 jquery 和引導程序

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

為了首先在 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'

更新了 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;

Answer 3

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

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

Answer 4

確保您已安裝 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';修改文件import 'bootstrap'; 為了使引導 javascript 工作。

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

保存所有更改，重新啟動 rails 服務器。

那應該工作。

Answer 5

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

在我看來第二種方式更靈活