Comments (11)
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.
from react-webpack-rails-tutorial.
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
from react-webpack-rails-tutorial.
@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.
from react-webpack-rails-tutorial.
@justin808 Export jQuery to Rails sounds interesting. Is this a manual process outside npm or Rails?
from react-webpack-rails-tutorial.
@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
from react-webpack-rails-tutorial.
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.
from react-webpack-rails-tutorial.
@jbhatab, we were just discussing this today. Let's get a PR for this.
from react-webpack-rails-tutorial.
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.
from react-webpack-rails-tutorial.
What if we package jquery_ujs with the react-webpack-server-rendering gem? Feels a little weird, but its an idea.
from react-webpack-rails-tutorial.
@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.
from react-webpack-rails-tutorial.
I've outlined the issues here: http://forum.railsonmaui.com/t/considerations-for-jquery-with-rails-and-webpack/344
from react-webpack-rails-tutorial.
Related Issues (20)
- Component Comment.jsx is using an insecure method to sanitize input --could suffer XSS atacks
- "Getting Started" doc not updated
- Provide example with react-rails HOT 2
- Update Rails 7, Ruby 3.1, and add ruby-debug gem HOT 1
- Clean up docs for react-webpack-rails-tutorial HOT 1
- Convert to Tailwind
- Separate workflows
- Migrate from Heroku to Control Plane HOT 1
- Replace `xvfb-action` with `coactions/setup-xvfb`
- The README.md file link in the docs/linters.md is outdated
- Update old documentation HOT 1
- Improve tests consistency HOT 1
- Resolve flashing while loading the page
- Rails 7 Jbuilder ActionView::MissingTemplate Error HOT 1
- Update to Rails 7.1
- Fix issues with Redis HOT 1
- Fix i18n issue (Missing locale)
- Not getting live comments on the ReScript page HOT 1
- No commit hash on the deployed project
- Add CI for auto deployment to ControlPlane HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-webpack-rails-tutorial.