自己紹介

じゅんじゅんと言うニックネームで、関西を拠点に活動しているフロントエンドエンジニアです。

HAL大阪3回生です。（2017/06/02現在）

イベントや、勉強会に参加してるので是非お会いした際はお声掛けください！

Prepackとは

Prepackとは、facebookが作っているJavaScriptを高速化するツールです。

公式サイト: Prepack

少し前にPrepackが話題になりましたね...

どういうものなのかサクッと公式サイトのコードを真似て見たいと思います。

(function () {
  function hello() { return 'hello'; }
  function world() { return 'world'; }
  global.s = hello() + ' ' + world();
})();

例えばこういったコード。

prepackを通すと

(function () {
  s = "hello world";
})();

になるらしい...

これは、計算できる場所をコンパイル時にしてしまって高速化を図るツールであると...

使い方は、ブラウザで確認するかローカルにprepackをインストールして使うかです。

ブラウザで使う場合は、公式サイトからリンクがはっているTry It Outから実行できます。

ローカルにインストールする場合は

$ npm install prepack -g

prepackをnpmからグローバルインストールしてください。

すると、コマンドラインでprepackというのが使えるようになります。

prepackコマンドの使い方は、

$ prepack <file name>.js

とjsのファイルを指定するか

$ prepack <file name>.js --out <out file name>.js

として、結果を保存するファイルを指定することもできます。

--outを指定しない場合はコマンドラインに実行結果が出力されます。

一度簡単な例で試してみましょう。

test1.js

(function(){

  var hoge = "hoge"
  var huga = hoge

  global.huga = huga

})()

これをprepackに通すと

(function(){
  huga = "hoge"
})()

と短縮されます。

注意点として、prepackではコードを書く際に無名の即時関数で囲まないといけません。

var hoge = "hoge"
var huga = hoge
global.huga = huga

などのように書き始めてしまうと

huga = undefined;
hoge = undefined;
hoge = "hoge";
huga = "hoge";

のような結果になります。

最後にglobalにいれていますが例えば

(function(){
  var hoge = "hoge"
  var huga = hoge

  console.log(huga)

})()

としてみると

console.log("hoge")

と短縮されています。

ES2015のコードでかいて、webpackでトランスパイルしたやつをprepackする。
とかになると、プラグイン的なものをいれるようです。

Prepackはまだまだ開発段階のものなので、プロダクトにすぐ導入できるかと言われるとそうでもないですが、長い目で見守っていきたいですね！

テスト的に書いているコードなどは全てGitHubにあるので参考までに。

質問等はTwitterへなげてもらえるとありがたいです。