実現したいこと
[実現したい事]
CDNのライブラリを参照した時に、TypeScriptのコードで、そのライブラリを使用しているコードの部分に赤線が引かれ、Visual Studio Codeのコンソールに"問題"として表示されており、エラーを出さないようにしたいです。
発生している問題・分からないこと
[わからない事]
CDN経由で指定している外部ライブラリをTypeScriptのコード内で使用した時、エラーを出さないようにする方法(エラーは表示されますが、npm run devを実行するとコード自体は正常に動きます)。
そもそも、CDN経由で指定した場合はエラーを出さないようにするのは不可能なのかもわかっていません。
[経緯]
Visual Studio Codeで、Viteを使用して環境を構築し、WEB上で見つけたwebgpuのサンプルコードを実行しようとしたが、CDNで外部のglMatrixというライブラリを使用しており、その部分を使用している部分に
'glMatrix' という名前は見つかりません。'SVGMatrix' ですか?
と表示されてしまう。
npm run devと実行すると、コード自体は動くが、エラーになっている部分をなくしたいので、質問させていただきました。
該当のソースコード
TypeScript
1vite.config.tsの部分 2import { defineConfig } from 'vite' 3import cdn from 'vite-plugin-cdn-import' 4 5export default defineConfig({ 6 build: { 7 lib: { 8 entry: './lib/main.ts', 9 name: 'Counter', 10 fileName: 'counter', 11 } 12 }, 13 plugins: [ 14 cdn({ 15 modules: [ 16 { 17 name: 'glMatrix', 18 var: 'glMatrix', 19 path: 'https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/3.4.2/gl-matrix-min.js' 20 } 21 ] 22 }), 23 ] 24}) 25
html
1CDNのURLを指定している部分(index.html) 2<!doctype html> 3<html lang="en"> 4 <head> 5 <meta charset="UTF-8" /> 6 <link rel="icon" type="image/svg+xml" href="/vite.svg" /> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 8 <title>Vite App</title> 9 <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/3.4.2/gl-matrix-min.js"></script> 10 </head> 11 <body> 12 <div id="app"></div> 13 <script type="module" src="/src/main.ts"></script> 14 </body> 15</html> 16
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
vite-plugin-cdn-importというのを、npmでインストールしてvite.config.tsファイルに追加してみましたが、何も変わりませんでした。
補足
[環境]
Visual Studio Code(バージョン:1.96.4)
Node.js(バージョン:v23.6.0)
Vite(バージョン:6.0.1)
あなたの回答
tips
プレビュー