VueCLIのindex.htmlにCDNでimportしたjsモジュールのクラスをVueで利用したい。

Question

前提・実現したいこと

Vue初心者です。現在SonyのパソリというFelica等のカードを読み込み、カードのIDｍを取得する仕組みを作っています。メーカから提供されているサンプルは、html一つに、script含め記載されているものでした。
これは当然問題なく動作します。
サンプルの中にあるSDKモジュールはcdnでimportする仕様となっており、Vueプロジェクト内のindex.htmlのheaderにサンプルファイルと同じscriptでimport しました。
これも、CromeのデベロッパーツールのNetworkタブにて読み込みが完了していることも確認できています。

実現したいことは

このモジュールをnewでオブジェクトのインスタンスをつくり、.vueファイルにて利用できるようにしたい。
具体的には、

let lib = new Sample();

を.vueファイルの、mounted オプションにて定義したいということです。
このcdnのパスのJavascriptファイルは、function や　Class が複数あり、ファイル内のClassをインスタンス化したオブジェクトから利用したいと思っております。

大変お世話をおかけしますが、知恵をお貸しください。

発生している問題・エラーメッセージ

単純に上記コードのままでは、
"ReferenceError: Sample is not defined" となります。　これは想定内でした。
そこで、　
let lib = new window.Sample();
としたら問題可決すると思っていたのですが、vs-codeのcompileはエラーなく終了するのですが
Chormeのデベロッパーツールでは
"TypeError: window.Sample is not a constructor"
となり、インスタンスが生成されません。

該当のソースコード

index.html

 －－－－省略
 <script type='module'>
	import {Sample} from 'https://cdn.パス/trial/Sample.js';
 </script>
　ーーー 省略

test.vue
ーーー省略
<script>
export default {
    data(){
        return{
            lib: {},
        }
    },
    mounted(){
         const lib = new window.Sample();
         console.log(lib);　
    },
}

試したこと

試しに直接CdnのパスのJavascriptファイルをプロジェクトのsrc直下に配置して、importをmain.jsで多ないましたがダメでした。
npm install できればよいのかもしれないですが、

npm install --save 'https://　'で該当のパスを指定してもインストールはできませんでした。

補足情報（FW/ツールのバージョンなど）

開発環境は　windows10
VSCODE
GoogleChorme
"dependencies": {
"bootstrap": "^4.6.0",
"core-js": "^3.6.5",
"firebase": "^8.2.7",
"vue": "^2.6.11",
"vue-router": "^3.5.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},

Answer 1

解決案

下記のように、scriptタグ内でwindow.SampleにSampleクラスの参照を渡しておく。

  <script type='module'>
    import {Sample} from 'https://cdn.パス/trial/Sample.js';
    window.Sample = Sample;
  </script>

説明

scriptタグ内でimportしたモジュールは、勝手にwindowオブジェクトに紐づくことはなく、そのscriptタグ内からしか参照できないはずです。
なので、new window.Sample()のような形でVueコンポーネント内から用いれればよいのであれば、importしているscriptタグ内で、windowオブジェクトにその参照を渡してあげれば良いかなと思います。
取り敢えず手元で適当なHTMLとJavascriptモジュールを用いて動作確認したところ、問題なく他から参照できました。

蛇足ですが…

…とはいえ、特定のVueコンポーネントで用いるモジュールをwindowに渡しておくのは正直あんまりイケていない印象を受けます。
もう少し良い解決案をお伝えできればよかったのですが、今の所ちょっと思いつかないので一旦この内容でお送りします。

こちらの内容がlatte217さんの一助になれば幸いです。
以上ご確認をよろしくお願いします！

Comments

[latte217]

marasonPD　さんありがとうございました。
いろいろ、教えていただいたように、index.html内のscriptタグに、windows.としてimport することで、動くようになりました。
もっともっと勉強しないといけないですね・・・
もし、また何かアイデアが見つかりましたら、教えていただければ幸いです。
まずは動いてもらわないとなにも進まないので、開発継続いたします！

ありがとうございました。