質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.34%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Vite

Viteは、フロントエンド向けのビルドツール。JavaScriptはもちろん、さまざまな環境での利用が可能です。ES Modulesを利用することで高速ビルドを実現でき、ファイルの変更時も変更箇所のみを更新できるといった特徴があります。

Q&A

0回答

41閲覧

ViteでCDNのライブラリを参照した際、TypeScritpでその部分にエラーを出さない方法について

ta0101

総合スコア1

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Vite

Viteは、フロントエンド向けのビルドツール。JavaScriptはもちろん、さまざまな環境での利用が可能です。ES Modulesを利用することで高速ビルドを実現でき、ファイルの変更時も変更箇所のみを更新できるといった特徴があります。

0グッド

0クリップ

投稿2025/01/18 08:56

実現したいこと

[実現したい事]
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)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.34%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問