Skip to content

Instantly share code, notes, and snippets.

@justinmetros
Last active August 3, 2017 01:18
Show Gist options
  • Save justinmetros/483aeea74a7ca68802a2159898bf01f1 to your computer and use it in GitHub Desktop.
Save justinmetros/483aeea74a7ca68802a2159898bf01f1 to your computer and use it in GitHub Desktop.
Rollup Config in Gulp - jQuery External Issue
// ...
// Build JS with Rollup
// ---------------------------------------
gulp.task('js', ['lint-js'], () => {
console.log('*** Compiling JS ***'.green);
return rollup.rollup({
entry: "./src/js/theme.js",
plugins: [
resolve({
jsnext: true,
main: true,
browser: true
}),
cjs({
include: [
'node_modules/**',
'src/js/vendor/**'
]
}),
amd(),
legacy({}),
inject({
include: '**/*.js',
exclude: 'node_modules/**',
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
}),
babel({
exclude: 'node_modules/**'
}),
],
external: ['jquery', 'jQuery']
})
.then(function (bundle) {
bundle.write({
format: 'iife',
dest: "./theme/assets/theme.js",
globals: {
jquery: '$'
},
});
})
});
//...
@justinmetros
Copy link
Author

justinmetros commented Aug 3, 2017

// demo.js

// Running this code will include jquery in my build if jquery is in my node_modules folder, but fail unless I remove 'external: ['jquery', 'jQuery']' from gulpfile.

// If i remove jquery from node_modules folder - below code works

import $ from 'jquery'
import 'slick-carousel'

export let demo = {

  init() {
    console.log($);  // returns jquery object
    $('.slider').slick();  
  }

}

demo.init();

@justinmetros
Copy link
Author

// slick.js from node_modules

//... 

/* global window, document, define, jQuery, setInterval, clearInterval */
(function(factory) {
    'use strict';
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    } else if (typeof exports !== 'undefined') {
        module.exports = factory(require('jquery'));   // <--- F*ck this line in particular
    } else {
        factory(jQuery);
    }

}(function($) {
    'use strict';
    var Slick = window.Slick || {};

    Slick = (function() {

// .....

@justinmetros
Copy link
Author

justinmetros commented Aug 3, 2017

Goal:

To include a 3rd party lib from npm that requires jquery but keep that dependency external and global.

I am linking to jquery from CDN and would like to keep it that way.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment