我目前正在使用RequireJs重构Express / EJS项目。
我刚刚开始学习RequireJS,但我无法弄清楚垫片的问题。
问题是我无法访问主页组件中的任何导出内容!
知道我在做什么错吗?
这是我的配置文件:
require.config({
baseUrl: 'javascripts',
paths: {
'jquery': './lib/jquery',
'jQueryUi': './lib/jquery-ui.min',
'slick': './lib/slick',
'domReady': './lib/domReady',
'instafeed': './lib/instafeed.min'
},
shim: {
'instafeed': {
exports: 'Instafeed'
},
'jQueryUi': {
deps: ['jquery'],
exports: '$',
},
'slick': {
deps: ['jquery'],
exports: 'jquery.fn.slick'
},
}
});
require(['domReady', 'components/homepage'],
function (domReady, homepage) {
domReady(function () {
homepage.initHomePage()
})
},
function (err) {
console.log('err:', err);
console.error('ERROR: ', err.requireType);
console.error('MODULES: ', err.requireModules);
}
);
这是我的主页文件:
define(['jquery', 'Instafeed','components/homepage'], function($, Instafeed) {
const userFeed = new Instafeed({
get: 'user',
userId: '21944101',
clientId: 'Client',
target: 'instafeed',
accessToken: donna_token,
resolution: 'standard_resolution',
sortBy: 'most-recent',
template: '<div class=slide><a href={{link}}><img src={{image}} class="img-responsive"/></a> </div>',
after: () => {
$('#instafeed').slick({
infinite: false,
speed: 300,
slidesToShow: 10,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 8,
slidesToScroll: 1
}
}, {
breakpoint: 600,
settings: {
slidesToShow: 6,
slidesToScroll: 1
}
}, {
breakpoint: 480,
settings: {
slidesToShow: 3,
slidesToScroll: 1
}
}
],
prevArrow: "<div class=insta-prev></div>",
nextArrow: "<div class=insta-next></div>"
});
}
});
// homePage
const homePage = {
loader: () => {
$('.preloader').delay(1500).fadeOut('slow')
},
init: () => {
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
}
};
// menu
const menu = {
show: () => {
const overlay = $(".overlay");
const slider = $(".menu");
$(".menu__toggle").toggleClass('cross');
menu.toggleOverlay(overlay);
menu.toggleSlider(slider);
},
toggleSlider: (el) => el.toggle("slide", {direction: "left", easing: "easeInOutCirc"}, 500),
toggleOverlay: (overlay) => overlay.toggle(),
};
//about
const about = {
loader: () => $(".rectangle").toggle("slide", {direction: "left", easing: "easeInOutCirc"}, 700, () => $(".description-text").fadeIn("fast"))
};
//Instafeed
const instagram = {
loader: () => userFeed.run()
};
const moreBtn = {
toggleConcerts: () => {
const loadMoreBtn = $(".load-more");
const lastConcerstDates = $(".dates-container .past-events li:nth-child(n+8)");
lastConcerstDates.toggle();
loadMoreBtn.toggle();
}
};
return {
initHomePage: function() {
const overlay = $(".overlay");
const burgerMenu = $(".menu__toggle");
const loadMoreBtn = $(".load-more");
const navLink = $(".nav-link");
$(window).on('load', homePage.loader());
homePage.init();
instagram.loader();
about.loader();
overlay.on("click", menu.show);
burgerMenu.on("click", menu.show);
navLink.on("click", menu.show);
loadMoreBtn.on("click", moreBtn.toggleConcerts)
}
}
});