Introduce browserify - Speaker Deck

Introduce browserify

by aereal

Slide 1

Slide 1 text

Introduce browserify id:aereal

Slide 2

Slide 2 text

id:aereal • aereal.org

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Web ✘ JavaScript

Slide 6

Slide 6 text

Web ✘ JavaScript

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

HTML

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

http://browserify.org/

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

http://www.ﬂickr.com/photos/61270106@N06/11671457605

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

http://www.ﬂickr.com/photos/28541331@N00/5177925918 browserify-shim

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

http://www.ﬂickr.com/photos/62799548@N00/1061447777 source transform

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

No content