Bonjour,
J'apprend l'utilisation de webpack puis je m'essais dans quelque fonctionnalité dont une qui m'interesse tous paticulièrment, le Lazy-loading.
Le fait d'appeler des fonctionnalité seulement quand j'en est besoin et donc de réduire la taille de mon Js principal.
J'ai créer une fonction qui va changer la couleur du background mais de manière un peu complexe voici le code:
let _Target = {};
_Target.Init = function(){
$("[data-target]").click(function(){
switch ($(this).attr('data-target')){
case "change_theme":
_Theme.Init();
break;
}
})
};
let _Theme = {};
_Theme.Init = function(){
import("./modules/_dark").then((_Dark) => {
_Dark.Change();
});
};
$(document).ready(function(){
_Target.Init();
});
let _Dark = {};
_Dark.Change = function() {
if($(".dark").is(":visible")){
$("body").removeClass('dark')
}else{
$("body").addClass('dark')
}
};
export default _Dark;
Donc pour le moment, le code est bon je compile le tout avec webpack, puis sur mon serveur test je fait les essais.
J'appuis sur le bouton qui à le data-target="change_theme" et l'éreur suivante apparait "_Dark.Change()" is not function, pourtant dans lefichier ont vois bien qu'il s'agis d'une fonction.
En cherchant un peu j'ai remarquer dans 0.bundle.js j'ai ceci:
webpackJsonp([0],{
/***/ 3:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* WEBPACK VAR INJECTION */(function($) {/* harmony default export */ __webpack_exports__["default"] = (function () {
var _Dark = {};
return _Dark.Change = function () {
if ($(".dark").is(":visible")) {
$("body").removeClass('dark');
} else {
$("body").addClass('dark');
}
};
});
/* WEBPACK VAR INJECTION */}.call(__webpack_exports__, __webpack_require__(0)))
/***/ })
});
Ma fonction est englober dans une fonction fermer.
Avez vous une idée de comment atteindre ma fonction depuis l'extérrieur ou comment pour que la fonction ne soit pas englobé ?
=======================================
Bon comme dans mon habitude c'est quand je post une question pour demander de l'aide que je trouve la solution.
si vous avez un problème similaire la voici la solution :
import("./modules/_dark").then((obj) => {
let _Dark = obj.default;
_Dark.Change();
});