如何让JQuery与Rails 6和Webpacker 6协同工作

Question

我真不敢相信让JQuery与Rails 6和Webpacker 6一起工作是如此困难。

Rails 6: How to add jquery-ui through webpacker?中的建议似乎不起作用，但很难知道是否是相同的代码堆栈。

我正在使用Rails 6.1和WebPacker6.0的预发布版本来使Heroku更好地发挥作用。哦，我的大部分"Javascript“都在.coffee文件中。

我甚至尝试将application.js重命名为application.coffee和重新格式化，但这也不起作用。

我的Gemfile

gem 'webpacker', '~> 6.0.0.beta.6'

我做了以下工作“

yarn add jquery jquery-ui-dist jquery-blockui

然后在webpacker 6风格中配置如下：

# config/webpacker/base.js
const { webpackConfig, merge } = require('@rails/webpacker')

const customConfig = require('./custom')

module.exports = merge(webpackConfig, customConfig)

# config/webpacker/custom.js
module.exports = {
    resolve: {
        alias: {
            jquery: 'jquery/src/jquery',
            jquery_ui: 'jquery-ui-dist/jquery-ui.js'
        }
    }
}

和

# code/app/packs/entrypoints/application.js

global.$ = require("jquery")
require("jquery") // Don't really need to require this...
require("jquery-ui")
require("jquery-ui-dist/jquery-ui")

这都是来自多个来源的各种尝试的混合，包括这个后Rails 6: How to add jquery-ui through webpacker?、https://github.com/rails/webpacker和其他。

顺便说一句，我正在尝试从Rails 5迁移我的Coffescript，因此它广泛使用了JQuery $ global。

任何帮助都很感激。

Answer 1

因此，在mechnicov的帮助下，最后的解决办法是，正如他所建议的：

// 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 = {
    resolve: {
        alias: {
            $: 'jquery/src/jquery',
            jQuery: 'jquery/src/jquery',
            jquery: 'jquery',
            'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
        }
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        })
    ],
    // Eliminate CORS issue
    devServer: {
        host: 'localhost',
        port: 3000
    }
}

# app/packs/entrypoints/application.js

// Make jQuery available everywhere
global.$ = require('jquery'), require('jquery-ui'), require('jquery-blockui')
...

我不知道这是否是最优雅的解决方案(是否决心、插件和application.js行都是必需的？)，但它有效。

顺便说一句，还要求确保webpacker和相应的纱线模块都是6.0.Beta.6版(见https://github.com/rails/webpacker)

# Gemfile

gem 'webpacker', '6.0.0.beta.6'

$ yarn add @rails/webpacker@6.0.0-beta.6

Answer 2

首先，在项目中添加JQuery：

yarn add jquery

然后在config/webpack/environment.js中添加webpack插件

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

environment.
  plugins.
  append(
    'Provide',
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  )

就这样

在WebPacker6.0中，您可以使用以下一种方法：

直接更新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

1. 使用自定义配置并将其合并到base:

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

Answer 3

按照给定文章中的“更新”回答。

https://gorails.com/forum/install-bootstrap-with-webpack-with-rails-6-beta