質問中の1の方法
グローバルに定義するしか無いようなライブラリがあった場合、基本的にはこの戦略を取ることが多いです。
まさにReactやReactDOMをアプリケーションのコードから分離するような場合と同様に扱うことで依存関係を解決します。
<!-- 外部スクリプトはアプリケーションのコードより前に読み込む -->
<script src="react.js" >
<script src="react-dom.js" >
<script src="https://js.pay.jp/v2/pay.js" >
<!-- 実装本体は外部スクリプトが読み込み終わってから実行する -->
<script src="application.js" >
この順序で読み込むことが確実であればapplicatino.js
でglobalに定義された変数にアクセスしても問題ないでしょう。
を書く位置を気を付けないと、コンポーネントのライフサイクルの中でスクリプトが二重にロードされることがある
HTMLに直書きであればReactのライフサイクル外なので気にしなくても良いと思います。
質問中の2の方法
問題として扱ってる2の方はReactで外部ライブラリをロードする場合に扱うパターンになりますが、この場合は以下のように記述することができます。
const loadScript = async (url) => {
return new Promise((resolve, reject) => {
const script = document.createElement("script");
script.src = url;
script.addEventListener("load", function() {
resolve();
});
script.addEventListener("error", function(e) {
reject();
});
document.body.appendChild(script);
});
};
export default function App() {
const onClick = async () => {
await loadScript("https://js.pay.jp/v2/pay.js"); // 動的にライブラリを読み込む
console.log("Loaded: ", window.Payjp); // 読み込み後に利用可能
};
return (
<div className="App">
<button onClick={onClick}>Load dynamic library</button>
</div>
);
}
ロードが完了したタイミングを動的に検知する必要がある
上記のloadScriptの挿す場所次第ですか、Promiseが解決した後でglobalの変数にアクセスすれば問題ないでしょう。
その他方法1
payjp.jsはnpmライブラリとしても提供されているようです。おそらくこれを利用するのが最も簡単でしょう。
コード中でimportもしくはrequireすれば利用可能です。
その他方法2
https://js.pay.jp/v2/pay.js
自体を直接ダウンロードしてきて、import/requireする方法です。つまり、自前で管理してしまうパターンです。
pay.js
としてダウンロードしてきたものを保存すると、
const onCLick = async () => {
await import("./pay.js");
// window.Payjp にアクセス可能
}
というようにDynamic Loadできます。
参考
これはnext.jsを利用中であればdynamic-importが利用できます。