SwiperJS w/ SyntaxError：无法在模块错误之外使用导入语句

Question

我似乎无法弄清楚是什么导致了这个错误，所以我将 go 在下面更详细地说明我所做的事情，如果有人能发现任何问题，请告诉我。

---

这是我得到的错误：

未捕获的语法错误：无法在模块外使用 import 语句

---

这是我所做的一切：

这是package.json ：

{
  "scripts": {
    "imagemin": "imagemin src/images/* -p --out-dir=dist/images",
    "start": "gulp style & gulp scripts"
  },
  "devDependencies": {
    "bulma": "^0.9.3",
    "gulp": "^4.0.2",
    "gulp-concat": "^2.6.1",
    "gulp-sass": "^5.1.0",
    "gulp-uglify": "^3.0.2",
    "gulp-uncomment": "^0.3.0",
    "imagemin-cli": "^7.0.0",
    "node-sass": "^7.0.1",
    "rough-notation": "^0.5.1",
    "sass": "^1.47.0",
    "swiper": "^7.4.1",
    "three": "^0.122.0",
    "vanta": "^0.5.21"
  }
}

这是我排队node_modules swiperjs：

wp_register_script(
    'Swiper',
    get_template_directory_uri() . '/node_modules/swiper/swiper-bundle.min.js',
    null, null, true
);
wp_enqueue_script('Swiper');

我切换了脚本以支持 SwiperJS 上的type="module" ：

这是我的swiper.js文件，它被压缩到main.min.js ：

document.addEventListener('DOMContentLoaded', function() {

    import Swiper, { Navigation, Pagination } from 'swiper';
    import 'swiper/css';
    import 'swiper/css/navigation';
    import 'swiper/css/pagination';

    Swiper.use([Navigation, Pagination]);

    new Swiper(".mySwiper", {
        direction: "vertical",
        slidesPerView: 1,
        spaceBetween: 30,
        mousewheel: true,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
    });
});

这是入队和缩小的最终 output：

document.addEventListener("DOMContentLoaded",()=>{const e=Array.prototype.slice.call(document.querySelectorAll(".navbar-burger"),0);0<e.length&&e.forEach(o=>{o.addEventListener("click",()=>{var e=o.dataset.target;const t=document.getElementById(e);o.classList.toggle("is-active"),t.classList.toggle("is-active")})})}),document.addEventListener("DOMContentLoaded",function(){import e,{Navigation as t,Pagination as o}from"swiper";import"swiper/css";import"swiper/css/navigation";import"swiper/css/pagination";e.use([t,o]),new e(".mySwiper",{direction:"vertical",slidesPerView:1,spaceBetween:30,mousewheel:!0,pagination:{el:".swiper-pagination",clickable:!0}})}),document.addEventListener("DOMContentLoaded",function(){VANTA.BIRDS({el:"#main-hero",mouseControls:!0,touchControls:!0,gyroControls:!1,minHeight:200,minWidth:200,scale:1,scaleMobile:1,colorMode:"lerpGradient",color1:2829099,quantity:3,backgroundColor:16251129,birdSize:1.5})});

有谁知道可能会发生什么？

Answer 1

如果您使用的是 Swiper 的捆绑版本，我相信您不需要导入 Swiper 的单独部分。 因此，只需尝试不使用import语句和Swiper.use语句的相同代码即可。

另外，不要忘记在默认初始化中，将 Swiper 样式文件排入队列以具有默认外观可能会有所帮助。

如果您只想使用 Swiper 所需的部分，您应该在源文件中包含源文件，而不仅仅是将位于 Generatepress 中的已构建文件排入队列。