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.3k
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
5.4k
How to send distibuted traces to Datadog using build own OpenTelemetry-Lambda distribution
aereal
3
290
好きな技術《コト》で、 生きていく技術 / life with what you like
aereal
5
4.4k
qron: Cloud Native Cron Alternativeの今
aereal
2
2.9k
自動作曲入門 / introduction to programatic music composition
aereal
1
530k
はてなブログ タグとCDK / The epic of AWS CDK and Hatena Blog Tag
aereal
2
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
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
510
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
980
Leading Effective Engineering Teams in the AI Era
addyosmani
7
640
CSC509 Lecture 06
javiergs
PRO
0
270
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
440
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
140
Webサーバーサイド言語としてのRustについて
kouyuume
1
4.9k
三者三様 宣言的UI
kkagurazaka
0
250
なんでRustの環境構築してないのにRust製のツールが動くの? / Why Do Rust-Based Tools Run Without a Rust Environment?
ssssota
14
46k
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
110
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
240
モテるデスク環境
mozumasu
3
1.3k
Featured
See All Featured
Thoughts on Productivity
jonyablonski
70
4.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
It's Worth the Effort
3n
187
28k
Build The Right Thing And Hit Your Dates
maggiecrowley
38
2.9k
Docker and Python
trallard
46
3.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6k
A Tale of Four Properties
chriscoyier
161
23k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1k
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