Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduce browserify

3f4be9784f765877f444bc839de29888?s=47 aereal
May 03, 2014

Introduce browserify

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

3f4be9784f765877f444bc839de29888?s=128

aereal

May 03, 2014
Tweet

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