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
npm or yarn, that is a problem.
Search
Yosuke Furukawa
PRO
August 26, 2018
Programming
18
2.4k
npm or yarn, that is a problem.
LL.pm で発表した npm と yarn の話です。
Yosuke Furukawa
PRO
August 26, 2018
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
130
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
4.2k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.2k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
250
Removing Corepack
yosuke_furukawa
PRO
9
1.7k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
420
Module Harmony について
yosuke_furukawa
PRO
3
1.7k
LTのやり方
yosuke_furukawa
PRO
16
2.7k
Other Decks in Programming
See All in Programming
AI時代のUIはどこへ行く?
yusukebe
11
5.7k
私の後悔をAWS DMSで解決した話
hiramax
4
180
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
430
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
1.1k
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
410
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
19
4.3k
速いWebフレームワークを作る
yusukebe
4
1.6k
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
160
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
1
330
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
25
9.7k
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
2
970
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
40
2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
Building Applications with DynamoDB
mza
96
6.6k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Writing Fast Ruby
sferik
628
62k
Designing for humans not robots
tammielis
253
25k
The Invisible Side of Design
smashingmag
301
51k
Thoughts on Productivity
jonyablonski
69
4.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Transcript
npm or yarn , that is a problem. 2018/08/26 @
LL.pm
Twitter: @yosuke_furukawa Github: yosuke-furukawa
None
FAQ
Q. npm ͱ yarn ͬͯͲͬͪ ͬͨΒ͍͍ΜͰ͔͢ʁ
A. ͍ɺͲ͍͍ͬͪͬͯ Μ͡Όͳ͍Ͱ͔͢ͶʢຊԻʣ ΈΜͳҧͬͯΈΜͳ͍͍
ͲͬͪύοέʔδΛཧ͢ ΔػೳͦΖͬͯΔɻ
ͨͩ·͊ͦΕ͚ͩݴͬͯಀ ͛ͳͷͰɺҰԠ໌֬ʹࠩผԽ ͞ΕͯΔ෦Λհ͢Δ
ύϑΥʔϚϯε
ܭଌͯ͠Έͨ (ͲͪΒcache͠ͳ͍ঢ়گ)
None
yarnͷউར
ܭଌͯ͠Έͨ (cacheΛ༗ޮʹͨ͋͠ͱͷ݁Ռ)
yarnͷউར
ͳΜͱͳ͘ମײͱ͋ͬͯΔɻ ZBSO͕͖ͳਓେମ1FSGPSNBODF ͕͍ͱ͍͏͜ͱͰͬͯΔ
npm ci
npm ci $*$%Ͱ͏ͨΊʹ༨ܭͳॲཧΛ͠ͳ͍ɺͨͩϥΠϒϥ ϦΛθϩ͔Βऔಘ͢Δ͜ͱʹಛԽͨ͠ػೳ
npm ci ͍
yarnͷ͕جຊతʹߴ npmͷ͕͍͕ɺCIͰ yarnΑΓߴ
yarn։ൃ༻్ʹ͍͍ͯΔ npm։ൃɾӡ༻ͰͦΕͧΕ ίϚϯυΛ͚͍ͯΔ
ػೳ ʢجຊతʹ΄΅compatibleʣ
yarnʹ͋ͬͯnpmʹͳ͍ػೳ
yarn licenses list
ґଘϥΠϒϥϦͷϥΠηϯε͕ ҰཡͰ͖Δػೳ $ yarn licenses list yarn licenses v1.9.4 !"
(BSD-2-Clause OR MIT OR Apache-2.0) # $"
[email protected]
# !" URL: https://github.com/dominictarr/rc.git # !" VendorName: Dominic Tarr # $" VendorUrl: dominictarr.com !" (GPL-2.0 OR MIT) # $"
[email protected]
# !" URL: https://github.com/faisalman/ua-parser-js.git # !" VendorName: Faisal Salman # $" VendorUrl: http://github.com/faisalman/ua-parser-js !" (MIT AND BSD-3-Clause) # $"
[email protected]
# !" URL: git://github.com/crypto-browserify/sha.js.git # !" VendorName: Dominic Tarr # $" VendorUrl: https://github.com/crypto-browserify/sha.js
yarn upgrade-interactive
ґଘϥΠϒϥϦͷߋ৽Λରܕ γΣϧͰߦ͑Δػೳ
npmʹ͋ͬͯyarnʹͳ͍ػೳ
npm audit
ґଘϥΠϒϥϦͰ੬ऑੑ͕ใࠂ ͞Ε͍ͯͳ͍͔Λࠪ͢Δػೳ $ npm audit === npm audit security report
=== # Run npm install --save-dev
[email protected]
to resolve 14 vulnerabilities SEMVER WARNING: Recommended action is a potentially breaking change %"""""""""""""""&""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""' # Low # Prototype Pollution # !"""""""""""""""("""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""") # Package # lodash # !"""""""""""""""("""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""") # Dependency of # nyc [dev] # !"""""""""""""""("""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""") # Path # nyc > istanbul-lib-instrument > babel-generator > # # # babel-types > lodash # !"""""""""""""""("""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""") # More info # https://nodesecurity.io/advisories/577 # $"""""""""""""""*""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""+
࠷ۙηΩϡϦςΟ͕͍ʢ ͍ʣ
͔͠npm auditnpmಠࣗͷػೳͱͯ͠ ఏڙ͞ΕͯΔʢଞͷαʔϏεͰ͑ͳ͍ʣ
yarn։ൃπʔϧͱͯ͠༏ल npmӡ༻πʔϧͱͯ͠༏ल
᠘ ʢ͍ͬͯͯҾ͔͔ͬΔϙΠϯτʣ
yarn ͷ᠘
ॏෳϞδϡʔϧΛআ͢Δػ ೳ͕npmͱcompatibleͳಈ ͖Λ͠ͳ͍ɻ
yarn, npm ͱʹॏෳͨ͠Ϟδϡʔ ϧ͕͋ͬͨΒτοϓϨϕϧʹ࡞Δ // ͜͏͍͏ґଘ͕ؔ͋ͬͨΒ app (lib_Aͱlib_Bʹґଘ)/ node_modules/ lib_A(v1)
(lib_B(v1)ʹґଘ)/ lib_B(v1) (lib_C(v1)ʹґଘ)/ lib_C (v1)/ lib_B(v2) (lib_C(v1)ʹґଘ)/ lib_C (v1)/ // CΛҰͭʹͯ͠ɺ֊ߏΛઙ͘͢Δػೳ(dedupeͱݺΕΔ) app/ node_modules/ lib_A (v1)/ lib_B(v1)/ lib_B(v2)/ lib_C(v1)/
yarnͷ߹جຊ͜ͷ dedupe͕ಈ͕͘ɺᘳ͡Ό ͳ͍ɻ https://github.com/yarnpkg/yarn/issues/6070
yarn dedupeෆશ // dedupe͕ෆશͩͱ͜͏ͳΔɻ app/ node_modules/ lib_A (v1)/ lib_B(v1)/ lib_C(v1)/
lib_B(v2)/ lib_C(v1)/ ΄ͱΜͲͷέʔεͰʹͳΒͳ͍͕ɺ$#ͷٯ ࢀর͕͋Δͱ/(
࣮ࡍʹwebpackϞδϡʔϧ ͱͦͷґଘͰҰճNGʹͳͬ ͨɻ
npm ͷ᠘
npm install ͰຖճlockϑΝΠ ϧॻ͖͑ͯ͘Δ
package-lockϑΝΠϧॻ͖͑ Δ $ npm install $ git diff - package-lock.json
(!! npm install ͚ͨͩ͠ͳͷʹϩοΫϑΝΠϧ͕ॻ͖Θͬ ͯΔ !!)
όάͱͯ͠ೝࣝ͞ΕͯΔ͕ɺ ·ͩͬͯͳ͍ɻ
None
package-lockϑΝΠϧॻ͖͑ Δ // workaround $ npm install --nosave OR $
npm ci // npm install —nosave option Λ͚ͭΔͱͦͷλΠϛϯάͰpackage-lock࡞ Βͳ͍ɻ // npm ci package-lock.json͔Βμϯϩʔυ͢ΔҎ֎ͷҰΛ͠ͳ͍ɻ
yarnCLI͕ͩރΕͯͳ͍ npmlockͷ෦ʹ·ͩएׯ ͷই͕͋Δɻ
·ͱΊ • ੑೳ • yarn ͷ͕جຊతʹ͍ • npm ciߴ •
ػೳ • yarnͷ͕։ൃ໘Ͱخ͍͠ػೳ͕ଟ͍ • npmͷ͕ӡ༻໘ʢಛʹηΩϡϦςΟʣͰخ͍͠ػೳ͕ଟ͍ • ᠘ • yarn => deduce ͍ • npm => lockfileউखʹॻ͖͑ͪΌ͏
Q. npm ͱ yarn ͬͯͲͬͪ ͬͨΒ͍͍ΜͰ͔͢ʁ
(ੑೳతʹyarnͷ͕͍͠ɺ ศརίϚϯυ͋Δ͚Ͳɺ npmͷ͕ηΩϡΞͩ͠ɺރΕ ͯΔ͠͏ʔʔΜ…)
A. ͖ͳͷͬͨΒ͍͍Μ͡Ό ͳ͍Ͱ͔͢Ͷ (^^)