Javascriptで外部ファイルを読み込む方法

どうも。Qiita投稿2度目のjavascript初心者エンジニアです。
先日、テンプレートにスクリプトタグを1行追加するだけでチャットボットが表示される！といったものを開発していたのですが、環境変数を外部ファイルから読み込むのに大分手こずったので対応方法について投稿します。

目次

１．はじめに考えていたこと
２．対応策

１．はじめに考えていたこと

当初はImport/Exportを使って外部ファイルを読み込めばいいか。と考えていましたが、
不特定多数のサイトにチャットボットを埋め込む要件ではcorsにひっかかるので動的にHTML要素を作成してjavascriptを読み込む方針で実装を進めました。

hoge.html

<script type="text/javascript" src="main.js"></script>

main.js

// 環境設定ファイルの読みこみ
let envJs = document.createElement('script');
envJs.type = 'text/javascript';
envJs.src = 'env.js';
// main.jsのスクリプトタグの前に要素を作成する
let parent = document.getElementByTagName("script")[0];
parent.parentNode.insertBefore(envJs,parent);

スクリプトタグがmain.jsよりも前にくるため、一見よさそうに見えますが読み込みがmain.jsからになってしまい、env.jsがないとエラーが発生してしまいました。

２．対応策

main.jsからenv.jsを呼び出すのではなく、main.jsとenv.jsを呼び出すjsファイルを作成してテンプレートに埋め込むことにしました。

hoge.html

<script type="text/javascript" src=call.js"></script>

call.js

// 環境設定ファイルの読みこみ
let envJs = document.createElement('script');
envJs.type = 'text/javascript';
envJs.src = env.js';
document.head.appendChild(envJs);

// メインファイルの読みこみ
let mainJs = document.createElement('script');
mainJs.type = 'text/javascript';
mainJs.src = main.js';
document.head.appendChild(mainJs);

無事読み込むことができました。

とはならないことが環境によってありました。。。

ローカル環境で動作確認していたときは大丈夫だったんですがステージ環境では読み込み順が安定しなくなりました。
処理速度の問題なんでしょうか。。。

そのような場合は以下のようにcall.jsに遅延実行を入れてあげるといいです。

call.js

// 環境設定ファイルの読みこみ
let envJs = document.createElement('script');
envJs.type = 'text/javascript';
envJs.src = 'env.js';
document.head.appendChild(envJs);

window.addEventListener('load', function() {
  // メインファイルの読みこみ
  let mainJs = document.createElement('script');
  mainJs.type = 'text/javascript';
  mainJs.src = main.js';
  document.head.appendChild(mainJs);
})

これで意図した読み込み順になりました。
参考になれば幸いです。

参考サイト