Introduce browserify

Transcript

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

24. None

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 ͳͲݱ࣮ʹ͋Δ໰୊Λ

    ղܾͯ͘͠ΕΔ
35. None