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?
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.