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

【问题标题】：SwiperJS w/ SyntaxError: Cannot use import statement outside a module errorSwiperJS w/ SyntaxError：无法在模块错误之外使用导入语句
【发布时间】：2022-01-10 01:56:18
【问题描述】：

我似乎无法弄清楚导致此错误的原因，因此我将在下面详细介绍我所做的事情，如果有人能发现任何问题，请告诉我。

这是我遇到的错误：

未捕获的语法错误：无法在模块外使用 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,
        },
    });
});

这是入队和缩小的最终输出：

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})});

有人知道会发生什么吗？

【问题讨论】：

标签： javascript jquery wordpress

【解决方案1】：

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

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

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

【讨论】：