How to attach jquery globally without index.html?

Question

I've created ReactJS webapp without isomorphic structure. I had index.html file, where i've attached all sufficient js libraries globally (e.g. jquery).

Now I'm trying to make my webapp isomorphic based on this example: https://github.com/yahoo/flux-examples/tree/master/react-router How can i attach jquery globally?

you can use npm module http://stackoverflow.com/questions/21674080/how-to-use-npm-jquery-module or what I would do is to use webpack and have jQuery plugin — knowbody, Jul 23 '15 at 05:29
I do use webpack. How can i attach jquery globally without npm? also, I can use it as npm module, but how can i "require" it in all js files at once? — stkvtflw, Jul 23 '15 at 05:36

knowbody · Answer 1 · 2015-07-23T06:41:22.040

2

With webpack you can use ProvidePlugin to inject implicit globals. It will look something like:

var webpack = require("webpack");

...

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

EDIT:
if it is some other library without the key, I would just set it, same as you would do it when you require something in the file. So instead of doing:

var _ = require('underscore')

you would use ProvidePlugin:

plugins: [
  new webpack.ProvidePlugin({
    "_": "underscore"
  }) 
]

edited Jul 23 '15 at 06:41

answered Jul 23 '15 at 05:42

knowbody

8,106
6
45
70

I have few more js libraries, which should be injected. They don't have keys like '$'. – stkvtflw Jul 23 '15 at 05:51

score 1 · Answer 2 · edited Jul 23 '15 at 14:36

It is generally a bad idea to define global variables throughout several CommonJS modules instead of using require() statements in each file that needs the dependency.

The idea behind CommonJS is to completely define units that could theoretically be added or removed from a project, and it would still be clear what dependencies they have and where they are located.

If you look at the Github repo that you linked, you'll notice that the author does a separate import React from 'react' statement in each one, when they all depend on it. While it might seem like it just adds unnecessary clutter to the top of the file that could be cleaned up by a global variable, I like to think that it serves as documentation that provides important information about what this particular component depends on.

Fortunately, tools like Webpack and Browserify make it easy to bundle up several components and their dependencies into a single file, so it pretty much eliminates the need to include jQuery as a global variable.

I would recommend installing jQuery as an npm module.

npm install jquery --save

Then, you'd just need to do var $ = require('jquery') in each file that needs to use it.

When you're finished, you can use something like Browserify to bundle up your components and dependencies, and import it into your index.html with a <script> tag. Simply point Browserify to entry point (your main Component), and let it do the rest. Build tools like Gulp will allow you to execute the entire process with a simple gulp build command. Here's a sample Gulpfile to get you started:

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var reactify = require('reactify');
var streamify = require('gulp-streamify');

gulp.task('build', function () {
    browserify({
        entries   : 'path/to/mainComponent.js', //where your main component lives
        transform : [reactify] //transform jsx
    })
        .bundle()
        .pipe(source('bundle.js')) //create file named 'bundle.js'
        .pipe(streamify(uglify('bundle.js'))) //minify
        .pipe(gulp.dest('path/to/destination')); //where you want your 'bundle.js' to be placed
});

Before using this, you'll want to do

npm install gulp-uglify vinyl-source-stream browserify reactify gulp-streamify --save-dev

and

npm install gulp-cli -g

Hope this helps!

How to attach jquery globally without index.html?

2 Answers2

Linked