Break out jquery from jquery-ujs: How to use webpack complete managed javascript library

[geminiyellow]

hello @justin808 , thanks for your work.
i dont want to use javascript library gem. e.g.
jquery-rails, bootstrap-sass in Gemfile.
follow you guide, i can import jquery from webpack's bundle file.
but when i remove bootstrap-sass, i can not @import 'bootstrap' in
app/assets/stylesheets, could you give me a example about this?

[justin808]

I'm using jquery-rails because of UJS integration. Possibly post this question at http://forum.railsonmaui.com. You can also submit a PR with an example of how to do this with Webpack. I did this before. While it's straightforward given the webpack docs.

I'd agree that we should breake out the jquery part from the ujs part: https://github.com/rails/jquery-ujs.

@dylangrafmyre if you want to try this, I can help you. Or if anybody else wants to make this PR...should be pretty simple.

[dansjensen]

I assume that you don't want to include jQuery in your bundle.js.

Add this to your WebPack configuration file:

externals: {
    // require("jquery") is external and available
    //  on the global var jQuery
    "jquery": "jQuery"
}

More info here: http://webpack.github.io/docs/library-and-externals.html

[justin808]

@urbanvikingr we'll put jquery in the package.json file, redo the gemfile, export jquery so rails can see it.

A very old version of the config files might still have this in the version history. I had experimented with this a bit.

[dansjensen]

@justin808 Export jQuery to Rails sounds interesting. Is this a manual process outside npm or Rails?

[justin808]

@urbanvikingr: Export jQuery to Rails just means that jQuery is exposed as a global variable. like window.jQuery or window.$

References:

http://www.codefornow.com/2015/05/18/webpack-exposing-jquery-as-a-global-variable/

https://github.com/webpack/expose-loader

[alex35mil]

My opinion on subject.

I think the most consistent way is to ask rails team to publish jquery_ujs to npm (they've already published it on bower btw) and move it to webpack's bundle, so all JS stuff can be manage from one place.

@geminiyellow
If you want to manage your JS via webpack, inevitably, you’ll end up with renunciation of assets pipeline, because it'll became useless.

[justin808]

@jbhatab, we were just discussing this today. Let's get a PR for this.

[jbhatab]

I agree with @alexfedoseev. Using jquery_ujs through npm is the cleanest and most consistent way to get jquery_ujs in the project but not make it feel different than all the other assets. I do feel since we have to use the jquery_ujs gem, it's irrelevant how we break out jquery until we solve both of them at once since jquery_ujs is already loading in jquery.

Just looked at the github though and it looks like they don't want to support npm, rails/jquery-ujs#423. I made another comment though.

[jbhatab]

What if we package jquery_ujs with the react-webpack-server-rendering gem? Feels a little weird, but its an idea.

[justin808]

@jbhatab I looked into this. It's super simple. We need to include only the ujs file in the application.js, and then have the webpack generate file expose jQuery.

[justin808]

I've outlined the issues here: http://forum.railsonmaui.com/t/considerations-for-jquery-with-rails-and-webpack/344