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.1k
How to send distibuted traces to Datadog using build own OpenTelemetry-Lambda distribution
aereal
3
250
好きな技術《コト》で、 生きていく技術 / life with what you like
aereal
5
3.4k
qron: Cloud Native Cron Alternativeの今
aereal
2
2.4k
自動作曲入門 / 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
snacks.nvim内のセットアップ不要なプラグインを紹介 / introduce_snacks_nvim
uhooi
0
350
Develop Faster With FrankenPHP
dunglas
2
2.6k
ローコードサービスの進化のためのモノレポ移行
taro28
1
330
私の愛したLaravel 〜レールを超えたその先へ〜
kentaroutakeda
12
3.6k
‘무차별 LGTM~👍’만 외치던 우리가 ‘고봉밥 코드 리뷰’를?
hannah0731
0
530
ミリしらMCP勉強会
watany
2
420
MCP世界への招待: AIエンジニアが創る次世代エージェント連携の世界
gunta
2
580
Compose Navigation実装の見通しを良くする
hiroaki404
0
180
アーキテクトと美学 / Architecture and Aesthetics
nrslib
12
3.1k
goにおける コネクションプールの仕組み を軽く掘って見た
aronokuyama
0
140
Windows版PHPのビルド手順とPHP 8.4における変更点
matsuo_atsushi
0
370
아직도 SOLID 를 '글'로만 알고 계신가요?
sh1mj1
0
360
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Site-Speed That Sticks
csswizardry
4
450
Being A Developer After 40
akosma
90
590k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.6k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Scaling GitHub
holman
459
140k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
4 Signs Your Business is Dying
shpigford
183
22k
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