Rails How to expose jQuery ($) to `window` in webpacker
项目技术栈：Rails + webpacker
最近做项目遇到这样一个场景：
前端用 ajax 发送一个 post 请求，dataType: 'script'
后端用 JS builder，render 一个局部模版去替换页面上的部分内容
$("#step-02").html("<%= escape_javascript(render partial: "smile_sharing_referral/prospect_form", locals: { referrer: @referrer } ) %>");
问题来了：
请求成功，也可以看到返回的 JS code，但是 JS code 并没有执行。
Debug
尝试手动去执行，发现了问题：在 window 环境下的$并不是我想要的jQuery
然后才意识到，webpacker 打包之后的 JS 并没有暴露jQuery
下面就是自己探索一番之后的结果：
- 在 package.json 中加一个新的 dependency
"expose-loader": “0.7.5”
- 为 webpack 创建一个定制的配置文件
Rails.root/config/webpack/expose_jquery.js
module.exports = {
module: {
rules: [{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: 'jQuery'
},{
loader: 'expose-loader',
options: '$'
}]
}]
}
}
- 在 webpack environment 配置文件中，加载并且 merge 这个定制配置
const { environment } = require('@rails/webpacker')
const exposeJquery = require('./expose_jquery.js')
environment.config.merge(exposeJquery)
module.exports = environment
怎么暴露 $ 要看你是 Webpack 几。。。3 以后 window.$ = window.JQuery = JQuery; 就行了，记得先 import 'jquery'
我用的这个，可以不用在 application.ts 里面 import jquery。
# webpack.config.js
const webpack = require('webpack');
module.exports = () => {
return {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: "jquery",
}),
].filter(Boolean),
};
};
Reply to
heroyct
heroyct
遇到同样的问题。也是通过插件的方式加载 jquery，但是在 html 里面直接用 jquery 还是提示找不到 $。最后在 application.js 里面加上了下面这句，就解决了。
window.$ = window.JQuery = JQuery;