Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Introduce browserify
Search
aereal
May 03, 2014
Programming
3
3.2k
Introduce browserify
Presented at Kyoto.asterisk (Kyoto.なんか)
aereal
May 03, 2014
Tweet
Share
More Decks by aereal
See All by aereal
盆栽転じて家具となる / Bonsai and Furnitures
aereal
0
3.7k
How to send distibuted traces to Datadog using build own OpenTelemetry-Lambda distribution
aereal
3
230
好きな技術《コト》で、 生きていく技術 / life with what you like
aereal
5
3.2k
qron: Cloud Native Cron Alternativeの今
aereal
2
2.3k
自動作曲入門 / introduction to programatic music composition
aereal
1
530k
はてなブログ タグとCDK / The epic of AWS CDK and Hatena Blog Tag
aereal
3
200k
はてなブログ タグの技術選択 / The technical details of Hatena Blog Tag
aereal
3
200k
ブログサービスのHTTPS化を支えたAWSで作るピタゴラスイッチ / The construction of large scale TLS certificates management system with AWS
aereal
3
400k
AWSではてなブログの常時HTTPS配信をバーンとやる話 / The Epic of migration from HTTP to HTTPS on Hatena Blog with AWS
aereal
14
18k
Other Decks in Programming
See All in Programming
Lottieアニメーションをカスタマイズしてみた
tahia910
0
130
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
300
Linux && Docker 研修/Linux && Docker training
forrep
24
4.5k
Grafana Cloudとソラカメ
devoc
0
170
Writing documentation can be fun with plugin system
okuramasafumi
0
120
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.8k
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
1
140
昭和の職場からアジャイルの世界へ
kumagoro95
1
370
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
5.3k
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
190
SwiftUI Viewの責務分離
elmetal
PRO
1
230
Ruby on cygwin 2025-02
fd0
0
140
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Code Review Best Practice
trishagee
67
18k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Rails Girls Zürich Keynote
gr2m
94
13k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Transcript
Introduce browserify id:aereal
id:aereal • aereal.org
id:aereal •Perl •JavaScript •Ruby •Shell script •Vim script •Io •Objective-C
id:aereal •Perl •JavaScript •Ruby •Shell script •Vim script •Io •Clojure
Web ✘ JavaScript
Web ✘ JavaScript
JavaScript ͷґଘղܾ http://www.flickr.com/photos/44606255@N00/370973576
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>
HTML • ಛผͳπʔϧෆཁ ! ! ! ! ! • Ϗϧυπʔϧͱ૬ੑ×
• minify • concatenate • compile • ਓؒ
ϏϧυπʔϧͰ݁߹ grunt.initConfig({ concat: { dist: { src: [ "src/jquery.js", "src/jquery.plugin.js",
"src/lib.js", "src/app.js" ], dest: "dist/all.js" } } });
ϏϧυπʔϧͰ݁߹ • minify AltJS ͳͲͷ ౷߹͕͘͢͠ͳΔ ! ! !
! • ਓؒ
αʔόαΠυ //= require jquery //= require jquery.plugin ! $(function ()
{ $('#body').plugin(); }); https://github.com/sstephenson/sprockets
αʔόαΠυ ! • Ϟδϡʔϧ͝ͱͷґଘ ؔΛ໌ࣔͰ͖Δ • ґଘղܾΛιϑτΣ Ξʹ ! !
• ಠࣗͷϞδϡʔϧػߏ • ϨΠϠΛލ͍Ͱ͍Δ • Ϗϧυπʔϧͱͷ౷߹
ސ٬͕ຊʹٻΊ͍ͯͨͷ •ϏϧυπʔϧʹΑΔ pre-process ͱ౷߹ ͍͢͠ •ґଘ͕ؔදݱͰ͖Δ •طଘͷϞδϡʔϧػߏΛར༻Ͱ͖Δ http://www.flickr.com/photos/71081860@N08/13890298975
http://browserify.org/
browserify •Ϟδϡʔϧػߏ •Node.js ࠐϞδϡʔϧͷ(࠶)࣮ •connect/express ͷϛυϧΣΞ
browserify •Ϟδϡʔϧػߏ •Node.js ࠐϞδϡʔϧͷ(࠶)࣮ •connect/express ͷϛυϧΣΞ
// app.js ! var _ = require('underscore'); var langs =
['JavaScript', 'Perl']; _.each(langs, function (l) { console.log(l); }); $ browserify app.js
browserify ͷϞδϡʔϧػߏ ΛࡾߦͰ •AST Λղੳͯ͠ •require() Λ୳ͯ͠ •ಡΈࠐΉ͖ϞδϡʔϧΛల։͢Δ
browserify ͷϞδϡʔϧػߏ ΛࡾߦͰ •AST Λղੳͯ͠ •require() Λ୳ͯ͠ •ಡΈࠐΉ͖ϞδϡʔϧΛల։͢Δ
browserify ͷϞδϡʔϧػߏ ΛࡾߦͰ •AST Λղੳͯ͠ •require() Λ୳ͯ͠ •ಡΈࠐΉ͖ϞδϡʔϧΛల։͢Δ
browserify ͷϞδϡʔϧػߏ ΛࡾߦͰ •AST Λղੳͯ͠ •require() Λ୳ͯ͠ •ಡΈࠐΉ͖ϞδϡʔϧΛల։͢Δ
http://www.flickr.com/photos/61270106@N06/11671457605
None
jQuery plugin •΄ͱΜͲ͕ CommonJS Modules ʹରԠ ͍ͯ͠ͳ͍ http://www.commonjs.org/specs/modules/1.0/
http://www.flickr.com/photos/28541331@N00/5177925918 browserify-shim
browserify-shim •Common JS Modules ඇޓͳ ϞδϡʔϧΛ browserfy Ͱѻ͑ΔΑ͏ʹ ͢ΔϓϥάΠϯ •ޙड़͢Δ
source transform Λߦ͏
browserify-shim •shim = •͋ΔϞδϡʔϧͷ export ͷఆٛ •͋ΔϞδϡʔϧͷґଘͷఆٛ
Demo https://github.com/aereal/browserify-playground
browserify-shim •ΑΓਐΜͩྫ README Λࢀর •͍Ζ͍ΖͰ͖Δ •package.json ʹઃఆΛॻ͘ͷ͕ؾ࣋ͪ ѱ͍
http://www.flickr.com/photos/62799548@N00/1061447777 source transform
source transform •browserify ͕ require() Λม͢Δલ ʹґଘϞδϡʔϧͷιʔείʔυΛม Ͱ͖ΔΈ
source transform (ྫ) •jnordberg/coffeeify •CoffeeScript Ͱॻ͔ΕͨϞδϡʔϧΛ JS ʹίϯύΠϧ͢Δ •hughsk/envify •ڥมΛల։͢Δ
• process.env.APP_ENV → "production"
browserify ͷ·ͱΊ •ϞδϡʔϧԽͱ͍͏டং •طʹ͋ΔΈ (CommonJS Modules) ʹଇ͍ͬͯΔ •jQuery plugin ͳͲݱ࣮ʹ͋ΔΛ
ղܾͯ͘͠ΕΔ
None