javascript - 使用 webpacker 从 Rails 控制器渲染 js
问题描述
刚刚将我的 Rails 应用程序中的 js 管道替换为webpacker
.
大多数事情都可以正常工作,但是渲染 js 的控制器不再按预期工作。
def action
format.js { render "javascript_partial" }
end
通常,上面会在我的视图中执行一个文件,javascript_partial.js.erb
如果action.js.erb
没有在render
.
问题似乎是这些文件与webpacker
管道没有连接,因此无法像访问全局库jquery
或显式管理它们自己的imports
.
此代码现在会导致客户端语法错误,因为它无法访问 jquery$
函数:
$("#element").html(<= j render partial: 'partial', locals: { object: @object } %>
在我看来,我有一个与内联 js 相关的问题。像下面这样的东西,
<%= form.collection_select ... onchange: 'Rails.fire(this.form, "submit")' %>
不再起作用,因为内联 js 无法访问全局对象,例如Rails
.
这似乎是一个简单的问题,但我无法在任何地方找到文档。
有谁如何协调 webpacker 与历史上预期的 Rails/js 行为?我需要带回来sprockets
吗?
如果有帮助,我的javascript/packs/application.js
文件看起来像,
import Rails from 'rails-ujs';
import Turbolinks from 'turbolinks';
Rails.start();
Turbolinks.start();
$(document).on("turbolinks:load", () => {
// initial setup ...
});
上面的工作非常好,并且可以访问,jquery
因为我已经将它导出到config/webpack/environment.js
,
environment.plugins.append('Provide', new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
jquery: 'jQuery'
}));
解决方案
感谢这篇精彩的文章!
用于expose-loader
将关键库暴露给JavaScript
整个应用程序中的香草。
1)安装依赖,
yarn add expose-loader --dev
2)配置config/webpack/environment.js
,
const { environment } = require('@rails/webpacker');
environment.config.merge({
module: {
rules: [
{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: '$'
}, {
loader: 'expose-loader',
options: 'jQuery'
}]
},
{
test: require.resolve('rails-ujs'),
use: [{
loader: 'expose-loader',
options: 'Rails'
}]
}
]
}
});
module.exports = environment;
推荐阅读
- android - Android 在电量不足时检查连接(省电模式)
- julia - 如何根据 Julia 中的列中的值查找数据框行的平均值?
- python - 尝试用 Python 实现自上而下的 DP,相信缓存不起作用
- node.js - Okta 教程:缺少 appBaseUrl
- javascript - 在为对象的键定义值时获取未定义
- php - 无法在 PHP 中重新打开已关闭的会话
- excel - Excel 单元格公式:比较计算的时间值与手动输入的时间值的间歇性错误
- python-3.x - 为以太坊生成数据集 DAG
- python - discord.py 只运行某些 cog
- registry - 使用存储在注册表中的版本号在 Inno Setup 中检测并卸载旧版本的应用程序