Menu icon Foundation
Foundation 6.5 JavaScript and Webpack best practices

Hello everybody :)

 

i'm using Foundation 6.5.0-rc.2. I was wondering what is the best way to work with Foundation's javascript modules. 

I always imported the full javacscript package like this:

// index.js
import $ from 'jquery';
import Foundation from 'foundation-sites';
import 'what-input';

window.addEventListener('DOMContentLoaded', () => {
  $(document).foundation();
});

 

But if i want to work with multiples js components or files, by including only specifics modules ?

// index.js
import $ from 'jquery';
import 'what-input';
 
import './dropdown'

window.addEventListener('DOMContentLoaded', () => {
  $(document).foundation();
});

 

// dropdown.js
import $ from 'jquery';
import { Dropdown } from 'foundation-sites';
 
const dropdownOptions = {
  // ...
}
const dropdownEl = new Dropdown(mobileDropdown, dropdownOptions)

 

is it the correct way to do it ? i tried to download the zurb template but it's still in 6.4 version ^^

Many thanks :)

webpackjavascriptes6modulesFoundation6.5

Hello everybody :)

 

i'm using Foundation 6.5.0-rc.2. I was wondering what is the best way to work with Foundation's javascript modules. 

I always imported the full javacscript package like this:

// index.js
import $ from 'jquery';
import Foundation from 'foundation-sites';
import 'what-input';

window.addEventListener('DOMContentLoaded', () => {
  $(document).foundation();
});

 

But if i want to work with multiples js components or files, by including only specifics modules ?

// index.js
import $ from 'jquery';
import 'what-input';
 
import './dropdown'

window.addEventListener('DOMContentLoaded', () => {
  $(document).foundation();
});

 

// dropdown.js
import $ from 'jquery';
import { Dropdown } from 'foundation-sites';
 
const dropdownOptions = {
  // ...
}
const dropdownEl = new Dropdown(mobileDropdown, dropdownOptions)

 

is it the correct way to do it ? i tried to download the zurb template but it's still in 6.4 version ^^

Many thanks :)

Rafi Benkual about 1 year ago

Ive used require to access my JS partials

require('./docs-sidenav');
require('./lang-select');
require('./microinteractions');
require('./windowresizeoptions');
require('./device');
$(document).foundation();

 

In the file you my need to import jQuery to access it

import $ from "jquery";

Smith Devon about 1 year ago
Ryan about 1 year ago

Hello thank you very much! I'll try to apply on my site. I think it should work out.