[英]How do you make JS EventListeners work in Rails 6 / webpacker?
[英]How do you get JQuery to work with Rails 6 and Webpacker 6
我真的不敢相信让 JQuery 与 Rails 6 和 Webpacker 6 一起工作会如此困难。
Rails 6 中的建议:如何通过 webpacker 添加 jquery-ui? 似乎没有工作,但很难知道它是否是同一个代码堆栈。
我正在使用 Rails 6.1 和 Webpacker 6.0 的预发布版本来让 Heroku 运行良好。 哦,我的大部分“Javascript”都是 in.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。
非常感谢任何帮助。
因此,正如他所建议的,在 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
首先将 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'
})
]
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.