Home
Title list
RSS
AdminCoffeeScript のインストールとコンパイル (Windows)
CoffeeScript の Windows 環境におけるインストールとコンパイル方法について書いてみました。
Node.js のインストール
CoffeeScript 自身が JavaScript で書かれているため、 ローカル環境で実行するにはサーバーサイド JavaScript である Node.js が必要になります。まず、 Node.js の本家のページから Windows 用のインストーラー(node-vX.X.X-x86.msi) をダウンロードします。
node-vX.X.X-x86.msi を実行すれば、 Node.js はインストールされます。
CoffeeScript のインストール
CoffeeScript は Node.js のパッケージマネージャーである npm 使ってイントールします。Node.js をインストールするとスタートメニューに [Node.js command prompt] ができるので、これを起動します。
立ち上げたコンソール上でコマンドを実行してインストールします。
> npm install -g coffee-script-g(--global) はグローバルインストールのオプションです。
Node.js では CoffeeScript のようにコマンドライン上で起動させたいものは、 グローバルインストールするようです。
インストールすると CoffeeScript のコンパイラーである coffee コマンドと CoffeeScript 版 make といった cake が使えるようになります。
プロキシ環境でのインストール
ネットワークの接続にプロキシを使用している場合は サーバーを設定していないとエラーとなります。プロキシサーバーを設定するには以下のコマンドを実行します。
npm config set proxy プロキシサーバーのアドレス:ポート番号
> npm config set proxy http://foo.co.jp:8080
私の環境ではプロキシを設定してもまだエラーが発生しました。 さらに次のコマンドを実行するとインストールに成功するようになります。
> npm config set registry http://registry.npmjs.org/
参考 :
環境変数の設定
coffee コマンドの実行時に、 コマンドが見つからないといったエラーがでる場合には次のフォルダーが 環境変数 Path に設定されているか確認してください。特に %AppData%\npm の方はユーザー別の環境変数の方に追加されるので、 設定されていない可能性があります。
| パス | 格納ファイル |
|---|---|
| %AppData%\npm | npm でインストールしたパッケージの実行ファイル (coffee.cmd, cake.cmd など) |
| %ProgramFiles%\nodejs | Node.js の実行ファイル(node.exe) や npm コマンド (npm.cmd) |
CoffeeScript を使ったコンパイル
coffee コマンドを使って CoffeeScript のコードを JavaScript に変換(コンパイル)します。まず、適当な CoffeeScript のファイルを作成しておきます。
hello.coffee :
alert('Hello World!')
コンパイルには次のようなコマンドを実行します。
coffee -c 入力ファイル
> coffee -c hello.coffee実行すると hello.coffee と同じフォルダーに hello.js が作成されます。
-c(--compile) がコンパイル用のオプションです。
他のオプションに関しては以下のページに詳しい説明が載っていました。
eshell での coffee コマンドの実行
私はコンソールに Emacs でのシェルモード(eshell) を使っているのですが、 Meadow の場合には eshell 上で coffee コマンドが上手く動きません。これは coffee.cmd の実体が bat ファイルで、 古いバージョンの eshell では bat ファイルに引数を渡して実行することができないためです。
以下の行を ~/.eshell/alias に追加すると eshell 上でも coffee でコンパイルすることができるようになります。
alias coffee node.exe $APPDATA/npm/node_modules/coffee-script/bin/coffee $*
ちなみに M-x compile などの場合にはそのまま coffee コマンドで実行できます。
スポンサーサイト
- 2012-10-16
- | コメント(0)
- | トラックバック(0)
- | Edit
- |
TypeScript のインストールとコンパイル (Windows)
Microsoft が TypeScript という新言語を発表しました。
CoffeeScript のように JavaScript に変換して使うタイプのものですが、
言語としては、
JavaScript(ECMAScript) で将来予定されている仕様を先取りした
次世代 JavaScript のような感じになっています。
この TypeScript の Windows 環境におけるインストールとコンパイル方法について紹介します。
TypeScript は VS2012 のプラグインか Node.js の npm パッケージとしてインストールします。 私が VS2012 を持ってないので、 Node.js を使ったインストール方法を説明します。
ただ、CoffeeScript のインストール とほとんど同じなので、簡単な説明にしています。
Node.js のインストール
Node.js の本家のページから Windows 用のインストーラー(node-vX.X.X-x86.msi) をダウンロードして、実行します。
プロキシの設定
プロキシサーバーを設定するには以下のコマンドを実行します。npm config set proxy プロキシサーバーのアドレス:ポート番号
> npm config set proxy http://foo.co.jp:8080プロキシを設定してもエラーとなる場合は、 さらに次のコマンドを実行します。
> npm config set registry http://registry.npmjs.org/
TypeScript のインストール
コマンドを実行して、インストールします。> npm install -g typescript
インストールすると TypeScript のコンパイラーである tsc ができます。
TypeScript を使ったコンパイル
tsc コマンドを使って TypeScript のコードを JavaScript に変換(コンパイル)します。まず、適当な TypeScript のファイルを作成しておきます。
hello.ts :
class Greeter { greeting: string; constructor (message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } }
コンパイルには次のようなコマンドを実行します。
tsc [オプション] 入力ファイル ...
> tsc hello.ts実行すると hello.ts と同じフォルダーに hello.js が作成されます。
hello.js :
var Greeter = (function () { function Greeter(message) { this.greeting = message; } Greeter.prototype.greet = function () { return "Hello, " + this.greeting; }; return Greeter; })();
オプション
tsc のコマンドオプションは -h または引数なしで tsc を実行すると Usage が表示されます。よく使いそうなのは、次のようなところじゃないかと思います。
| オプション | 機能 |
|---|---|
| -h, --help | ヘルプ(Usage) 表示 |
| --out | 出力ファイル名の指定。複数の入力ファイルからの統合 ex.) tsc --out foo.js foo.ts bar.ts |
| -w, --watch | スクリプトの変更の監視。 |
| -sourcemap | ソースマップの生成 |
Emacs での使用
TypeScript を Emacs で使用するための設定の紹介です。(ちゃんとはできてません)
メジャーモード
Microsoft が TypeScript 用のモードの lisp も一緒に公開している ということでサイトにとりに行きました。- Sublime Text, Vi, Emacs: TypeScript enabled! - Interoperability @ Microsoft - Site Home - MSDN Blogs
一時的に使えません。もうすぐバージョンアップするよ的なことが書かれてました。
いろいろツッコミたいところはありますが、とりあえず我慢して待ってみます。
Java や JavaScript のモードで代用すれば、まぁ、わりといけます。
追記
リリースが再開されたので、インストール方法を記述しました。eshell でのコマンドの実行
Meadow の eshell 上で動作させるには、 以下の行を ~/.eshell/alias に追加します。alias tsc node.exe $APPDATA/npm/node_modules/typescript/bin/tsc $*
コンパイルの設定
M-x compile で Emacs 上でのコンパイルを行うことができます。その出力結果のハイライトとエラー箇所へのジャンプには出力スタイルが登録されている必要があります。 上手くエラー箇所へジャンプできない場合は以下の記述を .emacs.el に記述してください。
(require 'compile) (setq compilation-error-regexp-alist (append '(;; d:/h...ript/sample.ts (13,175): ("^\\(.*\\) (\\([0-9]+\\),[0-9]+):" 1 2)) compilation-error-regexp-alist))詳しくは以前の記事をご覧ください。
- 2012-10-18
- | コメント(0)
- | トラックバック(0)
- | Edit
- |
JavaScript の軽量化(難読化)ツール
前回 、
JavaScript に変換して使う言語を紹介しました。
どうせならもう一手間かけて、リリースする際は軽量化(難読化)もしておきましょう。
という事で、今回は軽量化ツールの紹介です。
かしこいものになってくるとコードをより短い表現に変換したり、 使っていないコードを削除してくれたりもします。
コードの改変までやるのは不安を感じる人もいるかもしれませんが、 たいていのツールはオプションで指定しないかぎり、かってにそこまでやることはありません。
new Array(1, 2, 3, 4) => [1,2,3,4]なお、前回紹介した言語の中では、 Dart はオプションによって、 軽量化した状態のコードを生成することができます。
紹介する軽量化ツールはバッチ処理などをしやすいコマンドラインのものです。
| ツール | プラットホーム | 必要なもの |
|---|---|---|
| UglifyJS | クロスプラットホーム | Node.js |
| Microsoft Ajax Minifier | Windows | |
| JSC | Windows | |
| Google Closure Compiler | クロスプラットホーム | Java |
公開されている JavaScript ファイルを見たい場合などに 軽量化(難読化)を戻したい時があります。 この軽量化の逆は beautify や decompress と呼ばれています。
上記のツールの中では UglifyJS はこれが可能です。
しかし、そんなに行う処理でもないため、オンライン版で十分だと思います。
UglifyJS
JavaScript の解析、軽量化、整形ツールです。 Node.js がインストール済みであれば、一番簡単にインストールできます。インストール
Node.js がインストールされていない場合は、まず Node.js をインストールします。 インストール方法は CoffeeScript または TypeScript の記事を見てください。以下のコマンドを実行すると、ネットワークから取得してインストールしてくれます。
> npm install -g uglify-js
使い方
軽量化する場合には次のようなコマンドを実行します。uglifyjs [オプション] 入力ファイル
> uglifyjs -o hello_c.js hello.jsデフォルトでは軽量化後のソースは標準出力に出ます。 出力ファイルを指定するためには -o オプションを使用します。
オプションは必ず入力ファイルの前に記述して下さい。 後ろに書いたものは認識してくれません。
その他のよく使いそうなオプションをあげておきます。
| オプション | 説明 |
|---|---|
| -b, --beautify | 整形(軽量化の逆) |
| -o, --output <file> | 出力ファイルの指定 |
| --overwrite | 軽量化後のコードで入力ファイルを上書きします |
| --unsafe | コードをより短い表現に変換 |
使用法の詳細は以下のページを参照して下さい。 -h などでヘルプを表示することはできません。
Microsoft Ajax Minifier
Microsoft 製の軽量化ツールです。インストール
Microsoft のサイトからインストーラー(AjaxMinSetup.msi)をダウンロードし、 実行します。 以下のフォルダーにインストールされます。
c:\Program Files\Microsoft\Microsoft Ajax Minifier環境変数 Path に追加するか、 スタートメニューに追加された ［ Microsoft Ajax Minifier ］→［ Microsoft Ajax Minifier Command Prompt ］ の項目から使用します。
使い方
軽量化する場合には次のようなコマンドを実行します。ajaxmin [オプション] 入力ファイル
> ajaxmin hello.js -o hello_c.jsデフォルトでは軽量化後のソースは標準出力に出ます。 出力ファイルを指定するためには -o オプションを使用します。
短くするためのコードの改変まで行う場合は -hc オプションもつけます。
> ajaxmin -hc hello.js -o hello_c.js
その他のオプションは次の方法でみることができます。
- -? オプション
- スタートメニュー
［ Microsoft Ajax Minifier ］→［ Microsoft Ajax Minifier Documentation ］
JSC (JavaScript Compressor)
exe ファイル一つで動作するので、一番お手軽です。 ただし、 コードの改変までは行なってくれないようです。インストール
以下のサイトから zip ファイル(JSC-X.X.zip)をダウンロードします。 zip ファイル内の JSC.exe ファイルを Path の通ったフォルダーに置きます。
ここで一つ注意点があります。
.NET のコマンドラインツールに同名のプログラム jsc.exe(JScript Compiler) が存在します。 紛らわしいので、 jsm.exe などの別名にしておいた方が良いでしょう。
使い方
軽量化する場合には次のようなコマンドを実行します。jsc 入力ファイル [出力ファイル]
> jsc hello.js hello_c.js出力ファイルを省略した場合は jsc-compressed-MM-DD-YYYY.js の名前で生成されます。
入力ファイルも省略するとバージョン情報や使用法が表示されます。
コマンドオプションはありません。
Google Closure Compiler
Google 製の軽量化ツールです。インストール
Java を使用するため、入ってない場合は以下のサイトからインストールしてください。以下のサイトから zip ファイル(compiler-latest.zip)をダウンロードします。 zip ファイル内の compiler.jar ファイルを好きなディレクトリーにおいて下さい。
使い方
軽量化する場合には次のようなコマンドを実行します。java -jar "compiler.jarのパス" --js 入力ファイル --js_output_file 出力ファイル
$ java -jar compiler.jar --js hello.js --js_output_file hello-compiled.jsオプションを指定しない場合は、入力が標準入力、出力が標準出力です。
--js オプションを複数書くことによって、結合して軽量化したファイルを生成することができます。
$ java -jar compiler.jar --js util.js --js hello.js --js_output_file hello-compiled.js
コードの改変まで行う場合は、 --compilation_level ADVANCED_OPTIMIZATIONS オプションをつけます。
$ java -jar compiler.jar --compilation_level ADVANCED_OPTIMIZATIONS --js hello.js --js_output_file hello-compiled.js使用法の詳細は以下のサイトを見て下さい。
追記
最初、用語には一番よく使われているかなと思い、難読化を使っていました。 しかし、 軽量化 も結構使われているようなので、軽量化に変更しました。コードを読みづらくすることが目的ではなく、 短くした結果読みづらくなるだけなので、呼び方としては軽量化の方が個人的にはいいんじゃないかと思います。
圧縮 という言葉も使われますが、こちらは zip のような圧縮をまず連想します。 しかもサーバー側の設定によっては、 gzip で圧縮した html や JavaScript などのファイル (html.gz, js.gz) を通常のファイルのように使うこともできます。
そのため、 圧縮はちょっと紛らわしいでしょう。
ちなみに英語では、なんとなくですが minify が最近の主流っぽいです。
- 2012-11-10
- | コメント(0)
- | トラックバック(0)
- | Edit
- |
