Demonstrate how to configure browserify
with browserify-shim
to exclude jQuery
from the bundle and to make jQuery plugin (that supports CommonJS modules) work correctly, using global window.jQuery
object.
index.html
:
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="index.bundle.js"></script>
<div id="circle"></div>
index.js
:
import $ from 'jquery';
import 'jquery-circle-progress'; // this should work too: import $ from 'jquery-circle-progress';
$(() => $('#circle').circleProgress({value: 0.7}));
package.json
{
"private": true,
"dependencies": {
"jquery": "*",
"jquery-circle-progress": "*"
},
"devDependencies": {
"browserify": "~13.1",
"browserify-shim": "~3.8",
"babelify": "~7.3",
"babel-preset-es2015": "~6.16"
},
"browserify-shim": {
"jquery": "global:jQuery"
},
"scripts": {
"bundle": "browserify -t [ babelify --presets=babel-preset-es2015 ] -t [ browserify-shim --global ] index.js > index.bundle.js"
}
}
npm install
npm run bundle
Open index.html
in browser - animated circle should appear, no JS errors should raise in the console
.
Check index.bundle.js
- there should be no jQuery
bundled.
Answering myself. The solution is actually pretty obvious - once you know it. I had to change the order of browserify transforms from
to