search

bradstewart / electron-boilerplate-vue

Boilerplate application for Electron runtime
724 stars 94 forks source link

jQuery integration #14

Closed cakebake closed 8 years ago

cakebake commented 8 years ago

Sorry, stupid question ;) Which way do you recommend to integrate jquery to be reachable as global?

I have all the time error messages like Uncaught Error: Cannot find module 'jquery'

Tried it with the following code in main.html <script>window.$ = window.jQuery = require('jquery')</script>.

bradstewart commented 8 years ago

I should probably add a "Useful Snippets" section or something to the readme and include this as I imagine it's fairly common... I use webpack.ProvidePlugin in my build/webpack.base.conf.js like so: 

...
plugins: [
  ...
  new webpack.ProvidePlugin({
      // Automtically detect free var in modules and inject the libraries
      $: 'jquery',
      jQuery: 'jquery',
    }),
  ...
],
...

If you have any JS written directly inside <script> tags in main.html, you'll also need to use <script>window.$ = window.jQuery = require('jquery')</script> as webpack doesn't process that code.

Let me know if that works for you.

cakebake commented 8 years ago

Thanks for the answer! I got it :dancer: I'm just new with the topic. Eslint told me all the time that jQuery is not registered. -.-

Now, my configuration looks like this:

1. jQuery installed in app/npm_modules

2. Vars in global scope build/webpack.base.conf.js

...
plugins: [
  ...
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ...
],
...

3. Eslint conf .eslintrc.js (!)

...
'globals': {
  ...
    'jQuery': true,
    '$': true
  ...
},
...

I would suggest for a snippet wiki for this repo. Gladly I can take part with jQuery and Semantic UI.

THANKS FOR SUPPORT

mm-au commented 7 years ago

Thanks @cakebake . After literally hours of trying, it turned out to be the globals in eslintrc that was causing me so much grief. I wish this was in the vue docs!