I have to merge several files from my website with webpack, and for that I need to work with JS modules.
This is a child file.
export default () => {
$('[data-direction]').on('click', switchFeatured)
function switchFeatured (event) {
const icon = $(event.currentTarget);
if (icon.data().direction === 'right') {
if (featuredCurrent < featuredTotal) {
featuredCurrent++;
}
} else {
if (featuredCurrent > 1) {
featuredCurrent--;
}
}
$('#featured-list').css('left', ( (featuredCurrent - 1) * -100) + '%');
}
}
This is the main file.
window.$ = require ('jquery')
import Default from './pages/default'
import Home from './pages/home'
Default();
Home();
It's working this way, but is the way I export and use the imported modules correct? Got a better way?
If this work and you're happy with it then go for it.
But when using ES modules it's a little bit more idiomatic to import jquery whenever you use it:
// ./pages/default.js
import $ from 'jquery';
export default () => $(/* ... */);
// ./main.js
import Default from './pages/default'
import Home from './pages/home'
Default();
Home();