VSCodeでCDN版JSパッケージでもIntellisenseを動作させる方法案

Swiperの場合

• Intellisense用にSwiperをインストールする

  npm install -D swiper
  

• インストールしたSwiperのバージョンを確認する

  package.json

  {
    "swiper": "^10.3.1"
  }
  

• 同じバージョンのCDN版Swiperを読み込む

  index.html

  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/swiper@10.3.1/swiper-bundle.min.css"
  />
  
  <script src="https://cdn.jsdelivr.net/npm/swiper@10.3.1/swiper-bundle.min.js"></script>
  

• インストールしたSwiperからSwiper型を持ち込んでglobalにSwiper変数を定義する

  index.d.ts

  import { Swiper as S } from 'swiper'
  
  declare global {
    const Swiper: typeof S;
  }
  

• 使ってみる
  

---

本当はプリプロセッサをバチバチ使ってタスクランナーを走らせて特定ブランチにプッシュすればGitHub Workflowで自動ビルドが…（略）としたいのに、他の作業者がnpm自体知らない等で仕方なく生CSS・JSを記述する羽目になった時等に役に立つかもしれません。