Introduce browserify

Presented at Kyoto.asterisk (Kyoto.なんか)

1. Introduce browserify id:aereal
2. id:aereal • aereal.org
3. id:aereal •Perl •JavaScript •Ruby •Shell script •Vim script •Io •Objective-C
4. id:aereal •Perl •JavaScript •Ruby •Shell script •Vim script •Io •Clojure
5. Web ✘ JavaScript
6. Web ✘ JavaScript
7. JavaScript ͷґଘղܾ http://www.flickr.com/photos/44606255@N00/370973576
8. HTML <script src="/js/jquery.js"></script> <script src="/js/jquery.plugin.js"></script> <script src="/js/lib.js"></script> <script src="/js/app.js"></script>
9. HTML • ಛผͳπʔϧ͸ෆཁ ! ! ! ! ! • Ϗϧυπʔϧͱ૬ੑ× • minify • concatenate • compile • ਓؒ
10. ϏϧυπʔϧͰ݁߹ grunt.initConfig({ concat: { dist: { src: [ "src/jquery.js", "src/jquery.plugin.js", "src/lib.js", "src/app.js" ], dest: "dist/all.js" } } });
11. ϏϧυπʔϧͰ݁߹ • minify ΍ AltJS ͳͲͷ ౷߹͕͠΍͘͢ͳΔ ! ! ! ! • ਓؒ
12. αʔόαΠυ //= require jquery //= require jquery.plugin ! $(function () { $('#body').plugin(); }); https://github.com/sstephenson/sprockets
13. αʔόαΠυ ! • Ϟδϡʔϧ͝ͱͷґଘ ؔ܎Λ໌ࣔͰ͖Δ • ґଘղܾΛιϑτ΢Σ Ξʹ ! ! • ಠࣗͷϞδϡʔϧػߏ • ϨΠϠΛލ͍Ͱ͍Δ • Ϗϧυπʔϧͱͷ౷߹
14. ސ٬͕ຊ౰ʹٻΊ͍ͯͨ΋ͷ •ϏϧυπʔϧʹΑΔ pre-process ͱ౷߹ ͠΍͍͢ •ґଘؔ܎͕දݱͰ͖Δ •طଘͷϞδϡʔϧػߏΛར༻Ͱ͖Δ http://www.flickr.com/photos/71081860@N08/13890298975
15. http://browserify.org/
16. browserify •Ϟδϡʔϧػߏ •Node.js ૊ࠐϞδϡʔϧͷ(࠶)࣮૷ •connect/express ͷϛυϧ΢ΣΞ
17. browserify •Ϟδϡʔϧػߏ •Node.js ૊ࠐϞδϡʔϧͷ(࠶)࣮૷ •connect/express ͷϛυϧ΢ΣΞ
18. // app.js ! var _ = require('underscore'); var langs = ['JavaScript', 'Perl']; _.each(langs, function (l) { console.log(l); }); $ browserify app.js
19. browserify ͷϞδϡʔϧػߏ ΛࡾߦͰ •AST Λղੳͯ͠ •require() Λ୳ͯ͠ •ಡΈࠐΉ΂͖ϞδϡʔϧΛల։͢Δ
20. browserify ͷϞδϡʔϧػߏ ΛࡾߦͰ •AST Λղੳͯ͠ •require() Λ୳ͯ͠ •ಡΈࠐΉ΂͖ϞδϡʔϧΛల։͢Δ
21. browserify ͷϞδϡʔϧػߏ ΛࡾߦͰ •AST Λղੳͯ͠ •require() Λ୳ͯ͠ •ಡΈࠐΉ΂͖ϞδϡʔϧΛల։͢Δ
22. browserify ͷϞδϡʔϧػߏ ΛࡾߦͰ •AST Λղੳͯ͠ •require() Λ୳ͯ͠ •ಡΈࠐΉ΂͖ϞδϡʔϧΛల։͢Δ
23. http://www.flickr.com/photos/61270106@N06/11671457605
25. jQuery plugin •΄ͱΜͲ͕ CommonJS Modules ʹରԠ ͍ͯ͠ͳ͍ http://www.commonjs.org/specs/modules/1.0/
26. http://www.flickr.com/photos/28541331@N00/5177925918 browserify-shim
27. browserify-shim •Common JS Modules ඇޓ׵ͳ ϞδϡʔϧΛ browserfy Ͱѻ͑ΔΑ͏ʹ ͢ΔϓϥάΠϯ •ޙड़͢Δ source transform Λߦ͏
28. browserify-shim •shim = •͋ΔϞδϡʔϧͷ export ͷఆٛ •͋ΔϞδϡʔϧͷґଘͷఆٛ
29. Demo https://github.com/aereal/browserify-playground
30. browserify-shim •ΑΓਐΜͩྫ͸ README Λࢀর •͍Ζ͍ΖͰ͖Δ •package.json ʹઃఆΛॻ͘ͷ͕ؾ࣋ͪ ѱ͍
31. http://www.flickr.com/photos/62799548@N00/1061447777 source transform
32. source transform •browserify ͕ require() Λม׵͢Δલ ʹґଘϞδϡʔϧͷιʔείʔυΛม׵ Ͱ͖Δ࢓૊Έ
33. source transform (ྫ) •jnordberg/coffeeify •CoffeeScript Ͱॻ͔ΕͨϞδϡʔϧΛ JS ʹίϯύΠϧ͢Δ •hughsk/envify •؀ڥม਺Λల։͢Δ • process.env.APP_ENV → "production"
34. browserify ͷ·ͱΊ •ϞδϡʔϧԽͱ͍͏டং •طʹ͋Δ࢓૊Έ (CommonJS Modules) ʹଇ͍ͬͯΔ •jQuery plugin ͳͲݱ࣮ʹ͋Δ໰୊Λ ղܾͯ͘͠ΕΔ