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
3k
Introduce browserify
Presented at Kyoto.asterisk (Kyoto.なんか)
aereal
May 03, 2014
Tweet
Share
More Decks by aereal
See All by aereal
How to send distibuted traces to Datadog using build own OpenTelemetry-Lambda distribution
aereal
3
150
好きな技術《コト》で、 生きていく技術 / life with what you like
aereal
5
1.8k
qron: Cloud Native Cron Alternativeの今
aereal
2
1.7k
自動作曲入門 / 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
17k
ScalaとPerlでMicroservices in production / Building microservices with Perl and Scala in production
aereal
0
5.3k
Other Decks in Programming
See All in Programming
生成AIをkintoneに連携してみた
hideg
0
230
初心者がおさえておきたいAWS CDKのベストプラクティス 2024
konokenj
15
7.3k
ピグパーティにおけるMongoDB CommunityバージョンからAtlasへの移行事例
10969hotaka
0
130
20240706_CDKConf
takuyay0ne
0
1.2k
大規模マルチテナントを解決するYugabyteDBという選択肢
nnaka2992
1
250
企業向け生成AIアプリの 開発から得られた知見
takaakikakei
0
310
feature環境をGitHub ActionsとCloudFormationでいい感じに管理する
nealle
2
310
しくじり先生 Image Matching Challenge 2024 編
goosehaaan
0
810
CSC307 Lecture 11
javiergs
PRO
0
240
Jetpack for KMP
fornewid
1
290
英語
s_shimotori
1
220
最古の関数型言語「Lisp」ことはじめ / lisp_in_kamiyama
uhooi
1
190
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
37
2.2k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
90
47k
Designing Experiences People Love
moore
136
23k
Principles of Awesome APIs and How to Build Them.
keavy
124
16k
Writing Fast Ruby
sferik
623
60k
No one is an island. Learnings from fostering a developers community.
thoeni
17
2.8k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
Building Applications with DynamoDB
mza
89
5.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
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