Menu icon Foundation
How to add additional javascript to Foundation 6.4

I just started a new project with Foundation 6.4. In the old versions it was just an bower install for the library, include it in in the config.yml file, add the additional scripts to the js folder and it worked... simple as that.

In version 6.4 webpack was introduced. I tried the following (using lightslider as an example).

import $ from 'jquery';
import whatInput from 'what-input';
import lightSlider from 'lightslider';

window.$ = $;

// If you want to pick and choose which modules to include, comment out the above and uncomment
// the line below
import './lib/foundation-explicit-pieces';
import './carousel';

$(document).foundation();

Lightslider library added below whatinput, additional javascript inside carousel.js. Seems to compile properly but gives an console error in the browser, jQuery is not defined.

So doing some research and made some changes,

import {$, jQuery} from 'jquery';
import whatInput from 'what-input';
import lightSlider from 'lightslider';

window.$ = $;
window.jQuery = jQuery;

// If you want to pick and choose which modules to include, comment out the above and uncomment
// the line below
import './lib/foundation-explicit-pieces';
import './carousel';

$(document).foundation();

But that doesn't work also... is there any documentation on HOW to add some additional javascript libraries to Foundation 6.4 in combination with webpack?

webpack

I just started a new project with Foundation 6.4. In the old versions it was just an bower install for the library, include it in in the config.yml file, add the additional scripts to the js folder and it worked... simple as that.

In version 6.4 webpack was introduced. I tried the following (using lightslider as an example).

import $ from 'jquery';
import whatInput from 'what-input';
import lightSlider from 'lightslider';

window.$ = $;

// If you want to pick and choose which modules to include, comment out the above and uncomment
// the line below
import './lib/foundation-explicit-pieces';
import './carousel';

$(document).foundation();

Lightslider library added below whatinput, additional javascript inside carousel.js. Seems to compile properly but gives an console error in the browser, jQuery is not defined.

So doing some research and made some changes,

import {$, jQuery} from 'jquery';
import whatInput from 'what-input';
import lightSlider from 'lightslider';

window.$ = $;
window.jQuery = jQuery;

// If you want to pick and choose which modules to include, comment out the above and uncomment
// the line below
import './lib/foundation-explicit-pieces';
import './carousel';

$(document).foundation();

But that doesn't work also... is there any documentation on HOW to add some additional javascript libraries to Foundation 6.4 in combination with webpack?

Cédric 12 months ago

UP !

 

I've exactly the sae pb with owl.carousel (integration worked fine in 6.3.1 ... but not in 6.4.1).

Thanks for an answer.

Kyle De Sousa 12 months ago

Also stuck on this, anyone find a solution it out yet?

 

Jack Taylor 12 months ago

I have successfully added slick.js to my site and it's working as it did with v 6.3x. Here's what I did:

[1] changed the name of my javascript file to web64.js so that it may coexist during migration from 6.3 to 6.4.

[2] modified config.yml (at the bottom), to the new javascript filename:

  entries:
     - "src/assets/js/web64.js"

[3] modified web64.js (at the bottom in two places, additions appear in bold):


//import Foundation from 'foundation-sites';
// If you want to pick and choose which modules to include, comment out the above and uncomment
// the line below
import './lib/foundation-explicit-pieces';
import './lib/slick';

$(document).foundation();

$(document).ready(function(){
  $('.js-slider-quotes').slick({
    accessibility: true,
    adaptiveHeight: false,
    arrows: true,
    autoplay: true,
    autoplaySpeed: 5000,
    cssEase: 'ease'
  });
});

 

[4]  placed slick.js in the lib file, like so:

/assets/js/lib/slick.js

 

That's it. Type "foundation build" and it works.

Martin McGlade 12 months ago

Hi all, 

Rafi has replied to the same question I asked on this post.

 

http://foundation.zurb.com/forum/posts/53526-how-to-add-npm-package-js-file-to-foundation-64

 

M

jenny 7 months ago

Now it is the only way we know how to hack netflix account online and we can get the password here.

Benoit Lemay 23 days ago

Hi! I've struggle for few weeks/projects/year.. and i finaly got it work!

First  : sorry for my english.. 

My goal was to use Isotope / ImagesLoaded.. 

  1. My Foundation 6.4.3 Zurb template was install via npm
  2. I installed via npm both extra packages
  3. I installed also 'jquery-bridget' as mentionned here https://isotope.metafizzy.co/extras.html

My app.js file looks like this :

import $ from 'jquery';

window.jQuery = require('jquery');
window.$ = window.jQuery;

var jQueryBridget = require('jquery-bridget');
var Isotope = require('isotope-layout');
// make Isotope a jQuery plugin
jQueryBridget('isotope', Isotope, $);
// now you can use $().isotope()

import whatInput from 'what-input';

require('isotope-packery');
require('masonry-layout');
var imagesLoaded = require('imagesloaded');

And because of my needs, i put my js script in an external js files.. (because i needed different config in different web page).. 

My external file contain lots of code but mainly normal isotope config

$('.actualite-container').isotope({
		// options...
		itemSelector: '.actualite-item',
		layoutMode: 'packery',
		percentPosition: true,
		sortBy: 'sortDate',
		packery: {
			gutter: '.gutter-size'
		},
		sortAscending: false,
		getSortData: {
			sortDate: '.sortDate parseInt',
		}

	});

I'm pretty sure it's not the cleanest way but it works  FINALLY for me!

 

1. Do I need to import and require 'jquery'.. i'm not sure.. !?

 

Hope it will help someone!

Cheers