S.F. Blog:RequireJSにおけるIntellisenseについて

RequireJSは非同期でAMDモジュールをロードするライブラリであるが、このRequireJSで読み込むAMDモジュールをIntellisenseできないのでとても困っている。

実際RequireJSを使用しモジュールを読み込むコードは以下だ。

require.config({
  baseUrl: '/js/',
  paths: {
    "q": "http://cdnjs.cloudflare.com/ajax/libs/q.js/1.0.1/q",
    "jquery": "http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min",
    "bootstrap": "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min",
    "knockout": "http://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min",
    "d3": "http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min",
    "Three": 'http://cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.min',
    "Detector" : 'Detector.js'

  },
  shim: {
    'jquery': {
      exports: '$'
    },
    'bootstrap': {
      deps: ['jquery']
    },
    'Detector': {
      deps: ['Three']
    }
  }

});

require(["q", "jquery", "Three", "bootstrap", "knockout", "d3"],
function (q, jq, three, ig1, ig2, ig3) {
  var qa = q.defer();
  alert('loaded!!');
}
 ,
// Error //
function (err) {
  var elm = document.getElementById('#loading');
  if (!elm) {
    elm = document.createElement('div');
    document.body.appendChild(elm);
  }

  elm.classList.add('alert');
  elm.classList.add('alert-danger');
  elm.innerText = "エラー:" + err.description();
}
);

で、上のfunction (q, jq, three, ig1, ig2, ig3)のq,jqはAMD対応モジュールのため、QやJqueryのオブジェクトが入ってくる。もちろん実行時にはちゃんと使えるのだがIntellisenseのコード補完がまるで働かない。

生産性向上のためのライブラリの採用によって生成性低下を招いているのが今の状況なのだ。

一応本件でお悩みの方はそこそこいるようで、解決のためのrequire.intellisense.jsを作成された方もいらっしゃるし、それを具体的に使う方法もネット上には存在しているのだが、どうにもうまくいかないのだ。

ちなみにrequire.intellisense.jsというファイルはVS2013かもしくはWebEssentialsをインストールするとC:\Program Files (x86)\Microsoft Visual Studio 12.0\JavaScript\Referencesにも入ってくる。これは上記URLのものと違うコードだが、機能的にはほぼ同じものと思われる。まあざくっというと動的に生成するモジュールのコードをうまくIntellisenseに反映させるようなトリックが仕込まれているといったところだ。

require.intellisense.js参照すればいけるはずなのだが。。どうにもこうにもうまくいかなくて、皆目見当もつかない状態だ。でもこういう時って8割くらい凡ミスの可能性があるんだよね。。

もうしばらく調査して、intellisenseが効かないようだったらRequireJS使うのはあきらめようかな。あまりメリットはないし。。