真のrequire()をブラウザで

ブラウザ上のFSエミュレーション上で動的なrequire()ができるモジュール「browserfs-module ( https://github.com/Narazaka/browserfs-module.js )」を作ったのでみんな使ってね！

Transcript

1. 真のrequire() を ブラウザで @narazaka
2. 自己紹介 Twitter: Github: npm: CPAN: ドリコム2015 新卒 サー バー サイドRuby 好きな言語: Perl / CoffeeScript / Ruby / C# その他: 伺か/ 漫画読み描き/OP アニメ愛好家/ 鉄 @narazaka @Narazaka @narazaka NARAZAKA
3. 注意: 前置きが長いです
4. 最近の趣味
5. 伺か 2000 年頃に一部で流行ったデスクトップマスコット ( ポス◦ ペットの萌えキャラ版みたいな)
6. 伺か(materia.exe) キャラクター を差し替えできるデスクトップマスコット ランタイム キャラクター の人格は任意のWindows 用アンマネー ジド DLL をそのまま動作させる仕様( めっちゃ自由) DLL でごにょごにょすればJavaScript でも動きます
7. 世はスマホ全盛
8. デスクトップマスコットの居場所 「 デスクトップ」 の消滅
9. スマホでも動く ブラウザで動かしたい……
10. イカガカ
11. イカガカ (2014-) 1. jszip でキャラクター デー タのzip を解凍 2. node.js のFS をエミュレー トする でIndexedDB にファイルを展開 3. 人格DLL をemscripten でコンパイルして擬似FS にあるフ ァイルを読んで動作させる BrowserFS これ自体の話はまたいつか……
12. わぁい
13. …… あれ？
14. JavaScript で作った「 人格」 動かなくない？
15. 擬似FS 上にあるソー スファイル i f ( f i l e . m a t c h ( / ^ \ . * \ / / ) ) { f i l t e r s = r e q u i r e ( p a t h . j o i n ( p r o c e s s . c w d ( ) , f i l e ) ) ; }
16. 動作の前提 擬似FS 中のファイルから擬似FS 中の別のファイルを require() する処理 JavaScript で作った「 人格」 はブラウザJavaScript を使って いるのでそもそもrequire() がない → 動かない
17. JavaScript 伺かなのにJavaScript で書いたキャラが動かない マジか
18. 擬似FS 中のファイルから擬似FS 中の別のファイルを require() する やってやろうじゃん
19. browserfs-module つくりました
20. c o n s t f s = B r o w s e r F S . B F S R e q u i r e ( ' f s ' ) ; f s . w r i t e F i l e S y n c ( ' / a . j s ' , ' m o d u l e . e x p o r t s = r e q u i r e ( " b " ) ; ' ) ; f s . m k d i r S y n c ( ' / n o d e _ m o d u l e s ' ) ; f s . w r i t e F i l e S y n c ( ' / n o d e _ m o d u l e s / b . j s ' , ' m o d u l e . e x p o r t s = " b b " ; ' ) ; v a r r e s u l t = M o d u l e . _ l o a d ( " / a " ) ; c o n s o l e . l o g ( r e s u l t ) ; / / " b b "
21. わぁい
22. browserfs-module ブラウザ上にファイルシステムをエミュレー トしてnode.js っぽい動作をさせたい場合にぜひご利用ください()
23. 実装方法 1. まずnode.js をsubmodule としてクロー ン 2. node.js のソー スを正規表現で全力置換 3. webpack
24. node.js のrequire が使うもの 1. lib/module.js (Module) 2. lib/vm.js (runInThisContext 関数) 3. lib/internal/bootstrap_node.js (NativeModule) 4. lib/internal/module.js ( ユー ティリティ関数) 5. lib/internal/util.js ( デバック出力用ユー ティリティ関数) 6. src/node_ le.cc ( ファイル読み込み)
25. webpack が提供してくれるも の 1. vm.js (runInThisContext 関数) 足りない
26. node.js ソー スからパクって きて全力置換
27. node.js 内部で使うmodule 1. 組み込みのJavaScript 製module ( 使える) 2. うちinternal ( 使える) 3. C++ で組まれたネイティブバインディング ( 使えない)
28. build.js
29. まとめ 伺かをブラウザで動かしたかった BrowserFS でrequire できる を作った 正規表現は最高だぜ! browserfs-module