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

Introduce browserify

Introduce browserify

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

aereal

May 03, 2014
Tweet

More Decks by aereal

Other Decks in Programming

Transcript

  1. Introduce browserify
    id:aereal

    View full-size slide

  2. id:aereal
    • aereal.org

    View full-size slide

  3. id:aereal
    •Perl
    •JavaScript
    •Ruby
    •Shell script
    •Vim script
    •Io
    •Objective-C

    View full-size slide

  4. id:aereal
    •Perl
    •JavaScript
    •Ruby
    •Shell script
    •Vim script
    •Io
    •Clojure

    View full-size slide

  5. Web ✘ JavaScript

    View full-size slide

  6. Web ✘ JavaScript

    View full-size slide

  7. JavaScript ͷґଘղܾ
    http://www.flickr.com/photos/44606255@N00/370973576

    View full-size slide

  8. HTML

    src="/js/jquery.plugin.js">


    View full-size slide

  9. HTML
    • ಛผͳπʔϧ͸ෆཁ
    !
    !
    !
    !
    !
    • Ϗϧυπʔϧͱ૬ੑ×
    • minify
    • concatenate
    • compile
    • ਓؒ

    View full-size slide

  10. ϏϧυπʔϧͰ݁߹
    grunt.initConfig({
    concat: {
    dist: {
    src: [
    "src/jquery.js",
    "src/jquery.plugin.js",
    "src/lib.js",
    "src/app.js"
    ],
    dest: "dist/all.js"
    }
    }
    });

    View full-size slide

  11. ϏϧυπʔϧͰ݁߹
    • minify ΍ AltJS ͳͲͷ
    ౷߹͕͠΍͘͢ͳΔ
    !
    !
    !
    !
    • ਓؒ

    View full-size slide

  12. αʔόαΠυ
    //= require jquery
    //= require jquery.plugin
    !
    $(function () {
    $('#body').plugin();
    });
    https://github.com/sstephenson/sprockets

    View full-size slide

  13. αʔόαΠυ
    !
    • Ϟδϡʔϧ͝ͱͷґଘ
    ؔ܎Λ໌ࣔͰ͖Δ
    • ґଘղܾΛιϑτ΢Σ
    Ξʹ
    !
    !
    • ಠࣗͷϞδϡʔϧػߏ
    • ϨΠϠΛލ͍Ͱ͍Δ
    • Ϗϧυπʔϧͱͷ౷߹

    View full-size slide

  14. ސ٬͕ຊ౰ʹٻΊ͍ͯͨ΋ͷ
    •ϏϧυπʔϧʹΑΔ pre-process ͱ౷߹
    ͠΍͍͢
    •ґଘؔ܎͕දݱͰ͖Δ
    •طଘͷϞδϡʔϧػߏΛར༻Ͱ͖Δ
    http://www.flickr.com/photos/71081860@N08/13890298975

    View full-size slide

  15. http://browserify.org/

    View full-size slide

  16. browserify
    •Ϟδϡʔϧػߏ
    •Node.js ૊ࠐϞδϡʔϧͷ(࠶)࣮૷
    •connect/express ͷϛυϧ΢ΣΞ

    View full-size slide

  17. browserify
    •Ϟδϡʔϧػߏ
    •Node.js ૊ࠐϞδϡʔϧͷ(࠶)࣮૷
    •connect/express ͷϛυϧ΢ΣΞ

    View full-size slide

  18. // app.js
    !
    var _ = require('underscore');
    var langs = ['JavaScript', 'Perl'];
    _.each(langs, function (l) {
    console.log(l);
    });
    $ browserify app.js

    View full-size slide

  19. browserify ͷϞδϡʔϧػߏ
    ΛࡾߦͰ
    •AST Λղੳͯ͠
    •require() Λ୳ͯ͠
    •ಡΈࠐΉ΂͖ϞδϡʔϧΛల։͢Δ

    View full-size slide

  20. browserify ͷϞδϡʔϧػߏ
    ΛࡾߦͰ
    •AST Λղੳͯ͠
    •require() Λ୳ͯ͠
    •ಡΈࠐΉ΂͖ϞδϡʔϧΛల։͢Δ

    View full-size slide

  21. browserify ͷϞδϡʔϧػߏ
    ΛࡾߦͰ
    •AST Λղੳͯ͠
    •require() Λ୳ͯ͠
    •ಡΈࠐΉ΂͖ϞδϡʔϧΛల։͢Δ

    View full-size slide

  22. browserify ͷϞδϡʔϧػߏ
    ΛࡾߦͰ
    •AST Λղੳͯ͠
    •require() Λ୳ͯ͠
    •ಡΈࠐΉ΂͖ϞδϡʔϧΛల։͢Δ

    View full-size slide

  23. http://www.flickr.com/photos/61270106@N06/11671457605

    View full-size slide

  24. jQuery plugin
    •΄ͱΜͲ͕ CommonJS Modules ʹରԠ
    ͍ͯ͠ͳ͍
    http://www.commonjs.org/specs/modules/1.0/

    View full-size slide

  25. http://www.flickr.com/photos/28541331@N00/5177925918
    browserify-shim

    View full-size slide

  26. browserify-shim
    •Common JS Modules ඇޓ׵ͳ
    ϞδϡʔϧΛ browserfy Ͱѻ͑ΔΑ͏ʹ
    ͢ΔϓϥάΠϯ
    •ޙड़͢Δ source transform Λߦ͏

    View full-size slide

  27. browserify-shim
    •shim =
    •͋ΔϞδϡʔϧͷ export ͷఆٛ
    •͋ΔϞδϡʔϧͷґଘͷఆٛ

    View full-size slide

  28. Demo
    https://github.com/aereal/browserify-playground

    View full-size slide

  29. browserify-shim
    •ΑΓਐΜͩྫ͸ README Λࢀর
    •͍Ζ͍ΖͰ͖Δ
    •package.json ʹઃఆΛॻ͘ͷ͕ؾ࣋ͪ
    ѱ͍

    View full-size slide

  30. http://www.flickr.com/photos/62799548@N00/1061447777
    source transform

    View full-size slide

  31. source transform
    •browserify ͕ require() Λม׵͢Δલ
    ʹґଘϞδϡʔϧͷιʔείʔυΛม׵
    Ͱ͖Δ࢓૊Έ

    View full-size slide

  32. source transform (ྫ)
    •jnordberg/coffeeify
    •CoffeeScript Ͱॻ͔ΕͨϞδϡʔϧΛ
    JS ʹίϯύΠϧ͢Δ
    •hughsk/envify
    •؀ڥม਺Λల։͢Δ
    • process.env.APP_ENV → "production"

    View full-size slide

  33. browserify ͷ·ͱΊ
    •ϞδϡʔϧԽͱ͍͏டং
    •طʹ͋Δ࢓૊Έ (CommonJS Modules)
    ʹଇ͍ͬͯΔ
    •jQuery plugin ͳͲݱ࣮ʹ͋Δ໰୊Λ
    ղܾͯ͘͠ΕΔ

    View full-size slide