Importing Foundation 6.4 ES2016 JS files with your favourite module bundler

With the release of Foundation 6.4, they have moved to a module-based JavaScript architecture. This is great and definitely the way to go. Documentation is a bit lacking in this regard, however. I’ll quickly demonstrate in this article how to set up Foundation with your favourite module-bundler.

Lets cut to the chase. Your JavaScript file should start like this:

import $ from 'jquery'
window.jQuery = window.$ = $;

// Foundation
import { Foundation } from 'foundation-sites/js/foundation.core.js'
Foundation.addToJquery($);

import { rtl, GetYoDigits, transitionend } from 'foundation-sites/js/foundation.util.core';
Foundation.rtl = rtl;
Foundation.GetYoDigits = GetYoDigits;
Foundation.transitionend = transitionend;

import { Box } from 'foundation-sites/js/foundation.util.box.js'
import { Keyboard } from 'foundation-sites/js/foundation.util.keyboard.js'
import { MediaQuery } from 'foundation-sites/js/foundation.util.mediaQuery.js'
import { Move, Motion } from 'foundation-sites/js/foundation.util.motion.js'
import { Nest } from 'foundation-sites/js/foundation.util.nest.js'
// ... plus any other utitilies you may need

Foundation.Box = Box;
Foundation.Keyboard = Keyboard;
Foundation.MediaQuery = MediaQuery;
Foundation.Motion = Motion;
Foundation.Move = Move;
Foundation.Nest = Nest;

import { Triggers } from 'foundation-sites/js/foundation.util.triggers.js'
Triggers.init($, Foundation);

import { Dropdown } from 'foundation-sites/js/foundation.dropdown.js'
Foundation.plugin(Dropdown, 'Dropdown');

import { DropdownMenu } from 'foundation-sites/js/foundation.dropdownMenu.js'
Foundation.plugin(DropdownMenu, 'DropdownMenu');

import { Reveal } from 'foundation-sites/js/foundation.reveal.js'
Foundation.plugin(Reveal, 'Reveal');

import { Tabs } from 'foundation-sites/js/foundation.tabs.js'
Foundation.plugin(Tabs, 'Tabs');

import { Toggler } from 'foundation-sites/js/foundation.toggler.js'
Foundation.plugin(Toggler, 'Toggler');
// ... plus any other plugins you may need

$(document).foundation();

That should do as a template to kickstart any Foundation project from scratch. All of this is available in js/entries/foundation.js from within the Foundation module folder.