刚用webpacker
替换了我的Rails应用程序中的js管道。
大多数东西都能正常工作,但是渲染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'
}));
想通过this wonderful article想出来!
使用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;
我有一个类似的问题,我在字符串$("#element").html(
上有undefined $
我的配置与你的配置类似,我通过在文件pack/application.js
的末尾公开来解决
windows.jQuery = jQuery
window.$ = $