I am trying to use a plugin that is in /js/lib/stellar.jquery.js:
var $ = require('jquery');
require('./lib/stellar.jquery')
$(function(){
$.stellar();
});
When I run this though I get jQuery is not defined. I think the stellar jQuery plugin is loading before the jq library. At the bottom of the stellar plugin there's this code:
...
// Expose the plugin class so it can be modified
window.Stellar = Plugin;
}(jQuery, this, document));
Changing "jQuery" to "$" does not work either, gives "$ is not defined"
There is not any need to specify order for dependencies.
Because neither jQuery nor your plugin support CommonJS modules, you need to shim them to make them compatible with the browserify modules concept.
npm install browserify-shim --save-dev
add alias for jQuery and your plugin to your package.json (optional, but recommended)
"browser":{
"customPlugin": "path/to/custom/plugin",
"jquery": "./node_modules/jquery/dist/jquery.js"
}
add browserify shim transformation to enable shimming by adding to your package.json
"browserify": {
"transform": [
"browserify-shim"
]
}
configure shims
"browserify-shim": {
"jquery" : "jQuery",
"customPlugin" : { "depends": [ "jquery:jQuery" ] },
}
Consider, in dependencies configuration before colon you should specify file name, NOT SHIMMED MODULE NAME!!!
after colon you should specify identifier, which is expected by your module in global namespace.
Then, require your plugin to initialize it's code before usage
'use strict';
require('customPlugin');
var $ = require('jQuery');
$('.some-class-selector').myCustomPlugin();
Seems like another solution is to add :
global.jQuery = require("jquery")
Related
I have the following in my package.json file:
"browserify": {
"transform": [
"browserify-shim"
]
},
"browser": {
"jquery": "./node_modules/jquery/dist/jquery.js",
"tether": "./node_modules/tether/dist/tether.js"
},
"browserify-shim": {
"jquery": "$",
"tether": "Tether"
}
And then this in one of my JS modules:
const $ = require('jquery');
const Tether = require('tether');
I then get the following error in the browser:
tether.min.js:1 Uncaught TypeError: Cannot set property 'Tether' of undefined
However, if I don't try to shim Tether and just use window.Tether in the module that requires it, it works fine.
const $ = require('jquery');
window.Tether = require('tether');
Does anyone know why the browserify-shim wouldn't work for Tether in this way?
You're correct - you need to manually specify the window object from your bundle.
I'm not 100% sure, but my understanding is that this part of the documentation, when it says
x exports window.$
actually means that $ is available to all modules within the bundle as $ - this does not mean the window object of your webapp.
See for instance this issue.
The problem is in that section of the documentation where it seems people believe the object should be part of the window - might be a good idea to change the wording of that.
I'm trying to get some jQuery plugins to work with browserify. I have my package.json setup like this:
"browser": {
"jquery": "./client/js/vendors/jquery-2.2.2.min.js",
"jquery-validation": "./client/js/vendors/jquery.validate.js"
},
"browserify-shim": {
"jquery": "global:$"
},
However, when I require('jquery-validation'), I get cannot read property fn of undefined as it relates to this plugin. I'm trying to also have it so that $ will be global as it's used all over, without having to require it.
I've seen so many different articles and configs for this, but nothing seems to work.
Any suggestions or clarity would be greatly appreciated.
EDIT:
I also sometimes get Uncaught Error: Cannot find module 'jquery'
You don't need to shim jquery, it's conpatible with node yoo can simply install it with npm install jquery --save and make var $= require("jquery") in your code.
Yo do need to shim jquery.validate.
package.json:
{
"browser":{
"jquery-validation":"./node_modules/jquery-validation/dist/jquery.validate.js"
},
"browserify-shim":{
"jquery-validation":{
"depends":[
"jquery:jQuery"
]
}
},
"browserify":{
"transform":[
"browserify-shim"
]
},
"dependencies":{
"jquery":"^2.0.0",
"jquery-validation":"^1.15.1"
}
}
Note: jquery.validate depend on jQuery version 2.0^ ( you can see in the package.json file of the jquery-validation's npm package ) so you have to set dependency on jquery ^2.0 in your project otherwise jquery-validation will load he's own version of jQuery and integration will not work.
It seems like you have typo, you should call require('jquery-validation') instead of require('jquery-validate')
Why should I always use "browser" field in package.json to load jQuery plugin installed as npm module?
Some more details:
I'm using browserify-shim to load jQuery via CDN, and want to use jQuery plugin installed as npm module.
My app.js is as the following:
var $ = require('jquery'),
plugin = require('jquery-plugin');
$(function(){
// test jQuery
$('.test-jquery').text('jQuery works');
// test jQuery plugin
$('.test-plugin').plugin({
// some config
});
});
My package.json includes the following config for browserify:
"browserify": {
"transform": [
"browserify-shim"
]
},
"browserify-shim": {
"jquery": "global:$"
},
"browser": {
"jquery-plugin": "./node_modules/jquery-plugin/jquery-plugin.min.js"
}
It only works if I have the "browser" field for every plugin I want to use, otherwise I get "plugin is not a function" error at plugin function, but jQuery works.
How can I skip the "browser" field?
I have a library written in AMD style that can be used with RequireJS. jquery and jquery-ui are assumed to be provided by the user of the library. Say it looks like this:
// main-lib.js
define(['jquery', './aux-lib.js'], function ($) { ..(1).. });
// aux-lib.js
define(['jquery', 'jquery-ui'], function ($) { ..(2).. });
I'm trying to figure out how webpack works. For example, say I want to bundle these files into a single AMD style library file that still assumes jquery and jquery-ui from the outside:
// out.js
define(['jquery', 'jquery-ui'], function ($) { ..(1)..(2).. } );
How is this accomplished?
When I run webpack with main-lib.js as entry-point, it will complain that it can't find jquery and jquery-ui. If I configure the correct paths with resolve.alias, it bundles jquery and jquery-ui into out.js, which is not what I want. I tried using output.externals to no avail.
This was a pretty simple, stupid mistake on my part. The relevant field is not output.externals, but simply externals. See here. The other two relevant fields introduced there are inside output, but externals is not.
PS: externals can also be an array. Here is my current configuration:
{
entry: './main-lib.js',
output: {
path: './',
filename: 'out.js',
libraryTarget: 'amd'
},
externals: ['jquery', 'jquery-ui']
}
It's working quite nicely.
I have been given a template to work from by a client that has some 28 different jquery plugins that the client wants to use (e.g. ditching them not an option).
However I really want to use browserify to modularise my code, but short of trying to shim all 28 plugin and thir dependancy I can't work out how I would do that and not have to load JQuery for browserify and globally.
I tried doing this:
window.JQuery = require('jquery')
window.$ = window.JQuery
And this:
var globals = function(){
window.JQuery = require('jquery')
window.$ = window.JQuery
}
globals();
But neither seem to work and all the plugins throw an error. Does anyone now how I might make it work?
This is a pretty good way to do it, I think.
npm install jquery
npm install browserify-shim
Put this line in your package.json:
browserify-shim" : {
"./node_modules/jquery/dist/jquery.js" : "$"
}
So on the server, your usual require('jquery') will point to the node_modules spot. When you run browserify, it will set window.$ to the same code (you could also use jQuery). Also, if you did want to shim those plugins, just add them like this:
"browserify-shim" : {
"./node_modules/jquery/dist/jquery.js" : "jQuery",
"./plugins/bs_modal.js" : {
"depends": [ "./node_modules/jquery/dist/jquery.js" ]
}
}
or, cleaner:
"browser" : {"jquery": "./node_modules/jquery/dist/jquery.js"},
"browserify-shim" : {
"jquery" : "jQuery",
"./plugins/bs_modal.js" : {
"depends": [ "jquery" ]
}
}
I have been using the line below, to get bootstrap and jquery to be browserified:
window.$ = window.jQuery = require('jquery');