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
4.2k
How to send distibuted traces to Datadog using build own OpenTelemetry-Lambda distribution
aereal
3
250
好きな技術《コト》で、 生きていく技術 / life with what you like
aereal
5
3.6k
qron: Cloud Native Cron Alternativeの今
aereal
2
2.5k
自動作曲入門 / 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
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
kubode
1
140
VitestのIn-Source Testingが便利
taro28
6
1.7k
KawaiiLT 登壇資料 キャリアとモチベーション
hiiragi
0
110
Amazon CloudWatchの地味だけど強力な機能紹介!
itotsum
0
160
gen_statem - OTP's Unsung Hero
whatyouhide
1
200
地域ITコミュニティの活性化とAWSに移行してみた話
yuukis
0
240
小田原でみんなで一句詠みたいな #phpcon_odawara
stefafafan
0
330
Building a macOS screen saver with Kotlin (Android Makers 2025)
zsmb
1
150
AIコードエディタの基盤となるLLMのFlutter性能評価
alquist4121
0
210
The Evolution of the CRuby Build System
kateinoigakukun
0
700
AIコーディングの理想と現実
tomohisa
22
29k
Qiita Bash
mercury_dev0517
2
200
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.2k
Facilitating Awesome Meetings
lara
54
6.3k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
9
750
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
104
19k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
What's in a price? How to price your products and services
michaelherold
245
12k
Building Flexible Design Systems
yeseniaperezcruz
329
38k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
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