4

JavaScriptを実行している環境が次の3つのうちどれであるかをJavaScriptから検知して条件分岐をしたいです。

  1. 通常のWebページとして動作している
  2. node-webkitで動作している
  3. Node.js上で動作している

一度に3つ同時に判定しなくても、1か2かの分岐・2か3かの分岐ができれば良いです。

4 件の回答 4

4

2020/2/11 現在、この記事を参考に isNode を実装してみたがうまくいかなかった。
前提としてブラウザー側には webpack を使っている。
webpack を使った環境においては process も require も undefined ではない。
代わりに process.title の値を判断材料にしてみた。

const isNode = (process.title !== 'browser');

isNode の実装方法を調べてここにたどり着く人が他にもいると思うので参考にメモ残しておきます。

前提

  • Windows 10 Home Edition 上の Ubuntu(WSL)
  • Node.js v12.15.0
  • webpack 4.41.5
  • babel 7.8.4

process.title の値の調査結果

  • Node.js の場合:"/usr/local/bin/node"(たぶん、node のパスかな?)
  • ブラウザーの場合:"browser"
3

ブラウザーとブラウザーじゃない環境を識別するためには、これが使えます:

var runningInBrowser = (typeof window !== 'undefined');


このスレッドによると、Node.jsとnode-webkitを識別するためにはいくつかの方法があります:

var isNodeWebkit = !!(require && require('nw.gui'));

又は

var isNodeWebkit = !!(typeof(process) === 'object' && process.features.uv);

最初の二つを組み合わせると、

var currentEnvironment;
if (typeof window !== 'undefined') {
    currentEnvironment = 'browser';
} else if (require && require('nw.gui')) {
    currentEnvironment = 'node-webkit';
} else {
   currentEnvironment = 'node';
}

になります。

2

以下のように、Node.js 環境でのみ利用可能な変数やモジュールの存在チェックで環境の判定をします。

2. Node.js 上で動作していることのチェック

process 変数と、 require 変数が存在すればいいかをチェックします。

var isNode = (typeof process !== "undefined" && typeof require !== "undefined");

1. 通常のWebページとして動作していることのチェック

非 Node.js 環境であるかどうかだけチェックします。

var isBrowser = !isNode;

3. Node-Webkit 上で動作していることのチェック

組み込まれているはずのnw.gui モジュールの有無をチェックします。

var isNodeWebkit = (typeof require('nw.gui'))

組み合わせて分岐を作る

// Node.js で動作しているか
var isNode = (typeof process !== "undefined" && typeof require !== "undefined");
// ブラウザ上(非Node.js)で動作しているか
var isBrowser = !isNode
// node-webkitで動作しているか
var isNodeWebkit;
try {
    isNodeWebkit = isNode ? (typeof require('nw.gui') !== "undefined") : false;
} catch(e) {
    isNodeWebkit = false;
}

if (isNodeWebkit) {
    // node-webkitで動作
} else if ( isNode) {
    // Node.js上で動作している
} else {
    //  通常のWebページとして動作している
}

先人のブログ記事が参考になります。

1

お二人の回答および他のブログ記事などを参考に自分なりの答えを考えてみました。

function detectEnvironment() {
  var isBrowser = typeof window !== 'undefined';
  var isNode = typeof process !== 'undefined' && typeof require !== 'undefined';
  var isNodeWebkit = isBrowser && isNode;
  return {
    isBrowser: isBrowser,
    isNode: isNode,
    isNodeWebkit: isNodeWebkit
  };
}
  • Node.js環境で require('nw.gui') をすると例外になる。
  • node-webkitでHTML内の <script> で別のJSを require した場合、その先のJSでは require('nw.gui') が例外になる。 window へのアクセスは可能。

という理由により、 require('nw.gui') を使わずに書いてみました。

このファイルを detector.js として使う場合、下記のようにしたら <script src="detector.js"> でも require('./detector.js') でもうまく使えるんじゃないかと思います。

(function() {

  if (typeof module !== 'undefined') {
    module.exports = detectEnvironment;
  } else if (typeof window !== 'undefined') {
    window.detectEnvironment = detectEnvironment;
  }

  function detectEnvironment() {
    var isBrowser = typeof window !== 'undefined';
    var isNode = typeof process !== 'undefined' && typeof require !== 'undefined';
    var isNodeWebkit = isBrowser && isNode;
    return {
      isBrowser: isBrowser,
      isNode: isNode,
      isNodeWebkit: isNodeWebkit
    };
  }

})();

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。