node-webkitでTypeScriptを使ってはまるケース

JavaScript memo

node-webkitのJavaScript Contextでのrequireでのパス解決でハマる場合がある。

例えばこんなファイル構成で

  • index.html
  • js
    • index.js(index.ts)
    • fileUploader.js

各ファイルがこんな感じ。

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head >
    <meta charset="utf-8" />
    .................
    <script src="js/index.js"></script>
  </body>
</html>

//js/index.js
..................
var fileUploader = require('./js/fileUploader');
.................
//↑node-webkit的に問題なし.

//index.ts
import fileUploader = require('./js/fileUploader');
//↑index.tsからだとrequire('./fileUploader')なのでエラー。

↑node-webkitのJavaScript Context(いわゆるブラウザの世界)でrequireをした場合、JavaScriptファイルからのパスではなく、そのJavaScriptを読み込んでいるhtmlからのパスになる。

参考:

回避策1

その場しのぎ的。requireをindex.htmlのインラインに持ってくる。

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head >
    <meta charset="utf-8" />
    .................
    <script>
      //..................
       var fileUploader = require('./js/fileUploader');
      //................. 
    </script>
    <script src="
  </body>
</html>

回避策2

構造を変える

  • index.html
  • index.js(index.ts)
  • js
    • fileUploader.js
<!-- index.html -->
<!DOCTYPE html>
<html>
  <head >
    <meta charset="utf-8" />
    .................
    <script src="index.js"></script>
  </body>
</html>

うーむ。

node-webkitで作ったアプリをTypeScript化,CoffeeScript化してみての雑感

JavaScript

素のJavaScriptで書いて出来上がったnode-webkitアプリを今後の参考とするためにCoffeeScript化,TYpeScript化。
ライブラリ以外で書いたJSコードは300行程度と、かなり小規模なアプリ。*1
bowerで入れたのがBootstrap,Bootstrap v3 datetimepicker,jQuery,Moment.js,Vue.js。
npmで入れたのがjsftp(grunt周りを除く)。

JSからCoffeeScriptへの作業は3時間ぐらい。
JSからTypeScriptへの作業は型定義ファイルを書くのに不慣れだったため2日半ほど。

こちらと大体同じような感想。
中、大規模ならTypeScript,小中規模ならCofeeScriptを使うとよさ気。

TypeScript化は型定義ファイルを書くのにほとんど時間を書けた感じ。
書いた型定義ファイルは自前の外部モジュール2つとjsftp、node-webkit等のこのアプリを動かすのに必要最低限度の部分だけ。
正直、型定義ファイルを書くのは結構面倒だった。
規模が小さいので、書くコストに見合うご利益を感じられなかったからだと思う。
noImplicitAnyオプションを付けなければもっと早く終わったと思うが、それだとTypeScriptのメリットがいきないと感じた。

*1:なお、お客さんへの納品物なのでソースの公開はなし。