Tengo que fusionar varios archivos de mi sitio web con webpack, y para eso necesito trabajar con módulos JS.
Este es un archivo secundario.
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) + '%'); } }Este es el archivo principal.
window.$ = require ('jquery') import Default from './pages/default' import Home from './pages/home' Default(); Home();Funciona de esta manera, pero ¿es correcta la forma en que exporto y uso los módulos importados? ¿Tienes una mejor manera?
Si esto funciona y estás contento con él, entonces hazlo.
Pero cuando se usan módulos ES, es un poco más idiomático importar jquery cada vez que lo usa:
// ./pages/default.js import $ from 'jquery'; export default () => $(/* ... */); // ./main.js import Default from './pages/default' import Home from './pages/home' Default(); Home();