你如何让 JQuery 与 Rails 6 和 Webpacker 6 一起工作

Posted 2023-03-03

【中文标题】你如何让 JQuery 与 Rails 6 和 Webpacker 6 一起工作

【英文标题】：How do you get JQuery to work with Rails 6 and Webpacker 6

【发布时间】：2021-06-28 02:51:00

【问题描述】：

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

Rails 6: How to add jquery-ui through webpacker? 中的建议似乎没有奏效，但很难知道它是否是同一个代码堆栈。

我正在使用 Rails 6.1 和 Webpacker 6.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。

非常感谢任何帮助。

【参考方案1】：

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

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

【讨论】：

谢谢。但是您的答案与下面的 mechnicov 相同 - 讨论与 Webpacker 6.0 解决方案无关

【参考方案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'
    )
  )

就是这样

在 webpacker 6.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

使用自定义配置并将其合并到基础：

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

【讨论】：

谢谢。我知道这看起来很简单。我遇到的问题是webpacker 6.0下不存在environment.js文件，或者我理解。相反，它使用 base.js，正如我在问题中所展示的那样。我的理解也是，您粘贴的语法被 custom.js 替换，我在其中尝试了多种组合，但现在有：module.exports = resolve: alias: $: 'jquery/src/jquery', jQuery : 'jquery/src/jquery', jquery: 'jquery'

非常感谢 mechnicov。这几乎解决了这个问题，尽管我不明白为什么这在任何地方都没有得到更好的记录。我似乎必须做的另一件事是将我的 application.js 更新为： global.$ = require('jquery'), require('jquery-ui'), require('jquery-blockui') I'已经相应地更新了我的问题。

【参考方案3】：

因此，按照他的建议，在 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')
...

我不知道这是否是最优雅的解决方案（resolve、plugins 和 application.js 行都是必需的吗？），但它确实有效。

顺便说一句，还需要确保 webpacker gem 和相应的 yarn 模块都是 6.0.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