当記事ではJavascriptでモジュールを動的にimportする方法について記します。
awaitを使用する方法
この方法は<script type=’module’></script>の中、またはasync functionの中で使用できます。
const { func1, func2 } = await import('./sampleModule.js')
func1()
func2()
モジュール全体を受け取ることも可能です。
default functionは関数名ではなく一律defaultメソッドで呼びします。
const sampleModule = await import('./sampleModule.js')
sampleModule.default()
sampleModule.func1()
sampleModule.func2()thenを使用する方法
thenメソッドを使うこともできます。
import('./sampleModule.js').then(({func1, func2}) => {
func1()
func2()
})
モジュール全体を受け取るには下記のように書きます。
import('./sampleModule.js').then((module) => {
module.default()
module.func1()
module.func2()
})パスに変数が使える
静的importではパスに変数を使おうとするとエラーが出てできませんが、動的importならそれが可能です！
const path = './sampleModule.js'
const sampleModule = await import(path)
sampleModule.default()
sampleModule.func1()
sampleModule.func2()タイムスタンプも付けられる
タイムスタンプを付けることもできます！
あるCMSを使っている時にキャッシュが強すぎたのでこれは助かりました。
const sampleModule = await import(`./sampleModule.js?t=${Date.now()}`)
sampleModule.default()
sampleModule.func1()
sampleModule.func2()以上、Javascriptでモジュールを動的にimportする方法でした。
スポンサーリンク
