你如何让 JQuery 与 Rails 6 和 Webpacker 6 一起工作 [英] How do you get JQuery to work with Rails 6 and Webpacker 6

问题描述

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

I really cant believe that getting JQuery to work with Rails 6 and Webpacker 6 can be so hard.

Rails 6 中的建议:如何添加 jquery-ui通过 webpacker? 似乎没有工作，但很难知道它是否是相同的代码堆栈.

Suggestions in Rails 6: How to add jquery-ui through webpacker? don't appear to have worked but hard to know if it is the same code stack.

我正在使用 Rails 6.1 和 Webpacker 6.0 的预发布版本来让 Heroku 很好地运行.哦，还有我的大部分Javascript"在 .coffee 文件中.

I am using Rails 6.1 and a pre-release version of Webpacker 6.0 to get Heroku to play nicely. Oh, and most of my "Javascript" is in .coffee files.

我什至尝试将 application.js 重命名为 application.coffee 并重新格式化，但也没有用.

I even tried renaming application.js to application.coffee and reformatting but that didnt work either.

我的 Gemfile 有

My Gemfile has

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

我做了以下事情"

I have done the following"

yarn add jquery jquery-ui-dist jquery-blockui

然后在webpacker 6 style中配置如下:

Then in webpacker 6 style configured as follows:

# 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:如何通过 webpacker 添加 jquery-ui?，https://github.com/rails/webpacker 等.

This is all a mish-mash of attempts from a number of sources including this post - Rails 6: How to add jquery-ui through webpacker?, https://github.com/rails/webpacker and others.

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

By the way, I am trying to migrate my Coffescript from Rails 5 and so this makes extensive use of the JQuery $ global.

非常感谢任何帮助.

推荐答案

所以在 mechnicov 的帮助下，我的最终解决方案是，正如他所建议的:

So the final solution with assistance from mechnicov for me was, as suggested by him:

// 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 行都是必需的吗?)，但它有效.

I dont know if this is the most elegant solution (are the resolve, plugins and application.js line all necessary?), but it works.

顺便说一句，还需要确保 webpacker gem 和相应的 yarn 模块都是 6.0.0.beta.6 版本(参见 https://github.com/rails/webpacker)

BTW also required ensuring that both the webpacker gem and the corresponding yarn module were version 6.0.0.beta.6 (see https://github.com/rails/webpacker)

# Gemfile

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

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

这篇关于你如何让 JQuery 与 Rails 6 和 Webpacker 6 一起工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！