Rails How to expose jQuery ($) to `window` in webpacker

hiveer · 2019年08月06日 · 最后由 chuck 回复于 2020年06月21日 · 2916 次阅读

项目技术栈：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

1 个赞

jasl #1 2019年08月07日

怎么暴露 $ 要看你是 Webpack 几。。。3 以后 window.$ = window.JQuery = JQuery; 就行了，记得先 import 'jquery'

2 个赞

heroyct #2 2019年08月07日

我用的这个，可以不用在 application.ts 里面 import jquery。

# webpack.config.js
const webpack = require('webpack');

module.exports = () => {
  return {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: "jquery",
      }),
    ].filter(Boolean),
  };
};

chuck #3 2020年06月21日

对

heroyct 回复

遇到同样的问题。也是通过插件的方式加载 jquery，但是在 html 里面直接用 jquery 还是提示找不到 $。最后在 application.js 里面加上了下面这句，就解决了。

window.$ = window.JQuery = JQuery;

需要登录后方可回复, 如果你还没有账号请注册新账号