引入swiper
import Swiper from 'swiper';
import 'swiper/css/swiper.css';
初始化圖片輪播
initImage() {
const vm = this;
const mySwiper = new Swiper('.swiper-container', {
spaceBetween: 16,
slidesPerView: 3,
observer: true, // 修改swiper自己或子元素時(shí),自動(dòng)初始化swiper
observeParents: true, // 修改swiper的父元素時(shí),自動(dòng)初始化swiper
preventClicksPropagation: true,
autoplay: {
delay: 1500,
disableOnInteraction: true,
}, // 可選選項(xiàng),自動(dòng)滑動(dòng)
// 如果需要分頁器
pagination: {
el: '.swiper-pagination',
clickable: true,
},
// 如果需要前進(jìn)后退按鈕
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 滑到最后一個(gè)隱藏前進(jìn)按鈕
on: {
slideChangeTransitionEnd() {
if (this.isEnd) {
this.navigation.$nextEl.addClass('hide');
} else {
this.navigation.$nextEl.removeClass('hide');
}
},
},
});
// 鼠標(biāo)覆蓋停止自動(dòng)切換
mySwiper.el.onmouseover = function () {
mySwiper.autoplay.stop();
mySwiper.navigation.$nextEl.removeClass('hide');
mySwiper.navigation.$prevEl.removeClass('hide');
};
// 鼠標(biāo)離開開始自動(dòng)切換
mySwiper.el.onmouseout = function () {
mySwiper.autoplay.start();
mySwiper.navigation.$nextEl.addClass('hide');
mySwiper.navigation.$prevEl.addClass('hide');
};
},
打包時(shí)報(bào)錯(cuò)
js/chunk-2e9a501f.85da2169.js from UglifyJs
Unexpected token: name ?Dom7?, expected: punc ?;? [js/chunk-2e9a501f.85da2169.js:133,6]
我也會(huì)一臉懵逼,為什么終于要發(fā)版啦,打包出錯(cuò),哭死,弱小無助,唯有度娘營救我,
UglifyJs 僅支持JavaScript(ECMAScript 5)。
怎么解決呢
transpileDependencies: [
"swiper",
"dom7",
"ssr-window"
],
transpileDependencies
Type: Array<string | RegExp>
Default: []
默認(rèn)情況下 babel-loader 會(huì)忽略所有 node_modules 中的文件。如果你想要通過 Babel 顯式轉(zhuǎn)譯一個(gè)依賴,可以在這個(gè)選項(xiàng)中列出來。
用來處理ES6語法,將其編譯為瀏覽器可以執(zhí)行的js語法。
結(jié)果
打包順利,求大佬告知swiper內(nèi)部封裝了什么導(dǎo)致這個(gè)問題