以下のような過去の記事で再三言っていますが、Web系のプログラミングはほぼ初心者です。
そんな中、フロント用にTypeScriptに手を出した挙句、ほかのモジュールが必要になったので、nodeにも手を出しました。
教えてくれる人が周りにいなかったので、自己流でいろいろやりましたが…
やったことのメモを残すので、詳しい人正しいか教えてください（他力本願）
使いたかったモジュール
sheet.js（スクリプト名：xlsx.js）です。クライアントサイドでExcelを読み込んで、サーバーサイドに送れないものか、試行錯誤していました。
その上で、以下の事項を担保しようとしました。
TypeScriptを使って型付で開発する- トランスパイルは自動（コマンド一つ）でやる
tscコマンドみたいに、一発でやりたい Djangoから呼び出す（nodeじゃない。DjangoのTemplateとして利用する）
やったこと
以下、Windows環境が前提です。
node.jsの準備
そもそもTypeScriptを使うのにnode.js（というかnpm）が必要なので、入れました。
これは特に書くことはありません。単にインストールしました。
npmを使う
npm、つい最近までグローバルインストールしかやったことなかったんですよね。
TypeScriptをインストールしたときは
npm install -g typescript
ってやりました。
記事を見ていると、--saveとか--save-devとか出てくるのですが、これの意味が分かっていませんでした。
以下の記事参考にしていました。あまりにも基礎知識なさ過ぎて、こんなにわかりやすく書いてあるのに理解できませんでした。
saveの意味
nodeを使っていると、まず
npm init
をやれと書いてあります。これにより、package.jsonというファイルが生成されます。デフォルトではこんな感じです。
{ "name": "app", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", }
学んだこと
このファイルの一つの側面は、システムや開発で利用するパッケージを明示することにあります。
そして、--saveを付与した場合は、システムで使うパッケージであることを示し、--save-devを付与した場合は開発で使うパッケージであることを示します。
例えば、typescriptモジュールは、システムの本番環境では利用しません。システムでは、.tsファイルをコンパイルした結果である.jsファイルを使います。
よって、package.jsonを置いたフォルダで
npm install --save-dev typescript
のように、--save-devを付けてインストールします。すると、
{ "name": "app", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "typescript": "^3.1.6" } }
のように、devDependenciesという項目が追加されます。
xlsxを入れる
次に、本番で動くモジュールであるxlsxを入れます。
npm install --save xlsx
のように書きます。すると、package.jsonは
{ "name": "app", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "typescript": "^3.1.6" }, "dependencies": { "xlsx": "^0.14.1" } }
のようになります。dependenciesが増えます。
これだけじゃ動かない
これをやったうえで、TypeScriptで実装を行います。すると、xlsxの型参照はきちんと表示されます。
コンパイルも通ります。しかし、いざ動かすと、
Uncaught ReferenceError: exports is not defined
と表示され、
というエラーになります。
意味が分からない
どうしろと…
とりあえず、きっとこういうことだろうと思いました。
- そもそも、
commonjsではimportはまだ使えない（だからエラー） TypeScriptにこんな感じで書いてトランスパイルしている限り、JavaScript側でこのエラーは出る。回避不可- だから、
webpackやbrowserifyを使わないとダメなんだろう
browserifyと、TypeScript用にtsifyが必要とのことだったので、入れてみました。
そもそもnode.jsならエラーも出ないということもわかりました。
browserify
どちらも開発用なので、
npm install --save-dev browserify tsify
と書いてインストール。
コマンドで、
browserify index.ts -p [tsify] > bundle.js
のようにすると、bundle.jsのファイルにindex.tsが参照しているファイルがすべて書き込まれるとのことだったので、試しました。
確かにできました。しかし、xlsxモジュールすべてが結合するので、全体が3MBぐらいあるファイルが出来上がりました。
…いいの？
おわりに
この記事は唐突に終わりです。ひたすら試行錯誤しましたが、結局上のようなことをやってみました。
上のようなことを試して、とりあえず動くようになった。そこまでが成果です。
しかし、これでいいのだろうか…というのが正直なところです。JavaScriptが3MBとかダメだろ…という。
まあ、クライアントにキャッシュすればよいのでしょうが。このあたりの戦略が良く分かっていません。
誰か教えて…（´・ω・｀）
