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

hiveer · 2019年08月06日 · 最后由 heroyct 回复于 2019年08月07日 · 300 次阅读

项目技术栈: 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
共收到 2 条回复

怎么暴露 $ 要看你是 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),
  };
};
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册