【JavaScript】 ブラウザとサーバーサイド 共通コードで実行
更新日：2020/05/06
JavaScriptで作成したコードを、ブラウザだけでなくNode.jsなどのサーバーサイドでも動作させたいと思い、方法を調べてみました。
共通化コード
とりあえず次のコードで行けそう。
test.js
(( name , func)=>{
if(typeof exports === 'object' && typeof module !== 'undefined'){ // (1)
module.exports = func;
}else if( typeof define === "function" && define.amd ){ // (2)
define(()=>{ return func;});
}else{ // (3)
this[name] = func;
}
})(
() =>{ // 関数本体
console.log("Load OK!!");
}
);
(1) Node.jsなどのCommonJSに対応(module.exportsオブジェクト)
(2) RequireJSに対応(define関数)
(3) ブラウザに対応(Windowオブジェクト)
使用法(1) Node.jsなど
Node.jsなどのCommonJSは、スクリプトをモジュールとして読み込みます。
モジュール化するには、module.exportsにプロパティとして関数をセットします。
例：module.exports = func
動作確認用コード
const testFunc = require("./test.js");
testFunc();
使用法(2) RequireJS
RequireJSはdefine関数を使用します。
ただし、defineで指定した関数はその時点で実行されてしまうので、関数をリターンする関数を指定します。
例：define( ()=>{ return func;} );
動作確認用html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./require.js" data-main="./test-require.js"></script>
</head>
<body>
</body>
</html>
動作確認用スクリプト：test-require.js
define([
'./test.js'
], function(testFunc) {
testFunc();
});
使用法(3) ブラウザ
ブラウザで動作するJavaScriptは、windowオブジェクトのプロパティに関数をセットします。
グローバルスコープでのthisがwindowオブジェクトなので、共通化コードではthisにプロパティに関数をセットしています。
例：this[name] = func;
動作確認用html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./test.js" type="text/javascript"></script>
<script>
testFunc();
</script>
</head>
<body>
</body>
</html>
更新日：2020/05/06
関連記事
スポンサーリンク
記事の内容について
こんにちはけーちゃんです。
説明するのって難しいですね。
「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。
裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。
掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。
ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php
このサイトは、リンクフリーです。大歓迎です。
