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
npm3 ❓
Search
Daijiro Wachi
August 31, 2015
Programming
18
13k
npm3 ❓
Daijiro Wachi
August 31, 2015
Tweet
Share
More Decks by Daijiro Wachi
See All by Daijiro Wachi
OSS開発における合意形成にJavaScriptで参加し、変化を起こす / front-end-lounge-1
watilde
6
3.2k
amplify-cliで追加したfunctionに 環境変数・シークレットを設定する機能が どのように実現されたか / amplify-env-vars
watilde
0
1.4k
Amplify Japan User Group and OSS
watilde
0
1.1k
Web VitalsとJavaScriptエラーの可視化 - フロントエンドにおけるObservabilityとは / visualize-web-vitals-and-javascript-error
watilde
6
2.8k
Firefighting planner
watilde
1
80
Doctor Wombat - A debug guide to using npm.
watilde
0
510
Asynchronous wombats - some of the communication issues from our differences we face on GitHub
watilde
0
530
Write a song in JavaScript
watilde
3
760
npm update -g npm
watilde
5
2.8k
Other Decks in Programming
See All in Programming
Cloudflare Workersで進めるリモートMCP活用
syumai
12
1.7k
파급효과: From AI to Android Development
l2hyunwoo
0
170
Global Azure 2025 @ Kansai / Hyperlight
kosmosebi
0
160
設計の本質:コード、システム、そして組織へ / The Essence of Design: To Code, Systems, and Organizations
nrslib
10
3.9k
クラス設計の手順
akikogoto
0
130
はじめてのPDFKit.pdf
shomakato
0
110
監視 やばい
syossan27
12
10k
KANNA Android の技術的課題と取り組み
watabee
1
590
Browser and UI #2 HTML/ARIA
ken7253
2
190
今話題のMCPサーバーをFastAPIでサッと作ってみた
yuukis
0
150
OpenTelemetryで始めるベンダーフリーなobservability / Vendor-free observability starting with OpenTelemetry
seike460
0
130
REALITY コマンド作成チュートリアル
nishiuriraku
0
120
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
The Invisible Side of Design
smashingmag
299
50k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Statistics for Hackers
jakevdp
799
220k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.8k
Facilitating Awesome Meetings
lara
54
6.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Documentation Writing (for coders)
carmenintech
71
4.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
33k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Transcript
❓ @watilde 2015/08/31 - NodeֶԂ 17࣌ݶ
whoami • Daijiro Wachi - @watilde • Front/Back End Engineer
• interested in npm / V8 / flyjs
beta released at 2015-06-25
Table of contents • Why npm@3? • notes • breaking
changes • new features • v3.1 - v3.3: Minor updates
Why npm@3? • converting the CLI to an API •
dependency tree realization • improved support for Windows paths • better error messages & reporting • front-end tooling support • nerf peerDependencies • better CLI search
converting the CLI to an API • ػೳతཁ͕ࡍݶͳ͘ಧ͕͘ɺnpmطʹߴػೳ • APIͱͯ͠ఏڙͰ͖Εɺࣗ༝ʹΧελϚΠζՄೳ
• ͓·͚ʹɺnpmͷίʔυͷςετ͕͘͢͠ͳΔ • npm cache & npm-registry-clientͷ࠶ઃܭ • cache.jsͷίʔυɺnpmඇґଘɺmulti-registryαϙʔτ • ΦϑϥΠϯϞʔυͷ࣮Λ༰қʹ͢Δ
dependency tree realization • ਖ਼֬ͳΠϯετʔϧͷॱংΛอূ͢Δ 1. ΠϯετʔϧࡁΈͷpackageΛ֬ೝ 2. ϩʔΧϧͷnode_modulesͷޮతͳ࠷ऴΠϝʔδߏங 3.
࣮ࡍʹ࣮ߦ͠ͳ͖Ό͍͚ͳ͍ΞΫγϣϯͷϦετߏங 4. ΠϯετʔϧΛ࣮ߦ • npm i -g npm͕ࣦഊͨ͠ࡍʹ͕ࣗফ͑ΔࣄނΛ͙ • ؆୯ͦ͏ʹݟ͑ͯɺ࣮ࡍͷϓϩηεඇৗʹෳࡶ See also: https://docs.npmjs.com/cli/install#algorithm
improved support for Windows paths • front-endπʔϧͷීٴʹΑΓɺWindowsͰnpm͕α ϙʔτ͖͠Ε͍ͯͳ͍γʔϯ͕සൃ࢝͠Ίͨ • plugin-basedͳπʔϧͷଟ͘ɺඇৗʹ͍ϑΝΠϧ
ύεΛཁٻ͢ΔΑ͏ʹͳ͖ͬͯͨ • Windows Ͱɺ୯Ұύε࠷େ 260 จࣈ·Ͱ • npm dedupeͰnode_modulesͷFlatԽΛਪਐ͖ͯͨ͠ ͕ɺ͜ͷͷղܾͷͨΊʹେʹมߋ͕ඞཁ
better error messages & reporting • ࠷ॳͷࠒͷϢʔβʔͰ͋ΔServer side Node.js DeveloperɺෳࡶͳUnix
Error messageΛใࠂ • front-end toolΛ୲͏Α͏ʹͳ͖ͬͯͨͷͰɺͬͱ ͔Γ͍͢ΤϥʔΛදࣔͰ͖ΔΑ͏ʹվળ • 1000 issues͕OPENঢ়ଶʹ͋ΓɺreportίϚϯυͷ Α͏ͳܗͰΤϥʔใࠂͷ؆қԽɺ࠷దԽɺޮ্
front-end tooling support • npmͷར༻ྫͰɺ࠷͍ͯ͘͠Δͷ͏ͪͷҰͭ • ଟछଟ༷ͳϢʔεέʔεΛαϙʔτ͢ΔγϯϓϧͳαϒηοτΛ ௐࠪ͢Δ • Ember/Angular/BrowserifyͳͲͷ։ൃνʔϜͱٞ
• ۩ମతʹෳࡶͳ͕ൃੜ͍ͯ͠ΔΘ͚Ͱͳͦ͞͏ͰɺԿ͔ ͕͋Εղܾ͢Δͱ͍͏ํ • ecosystemͱ͍͏ɺpluginͷݕࡧΛ༰қʹ͢Δregistryଆͷ৽ػೳ ͳͲ͕༧ఆ͞Ε͍ͯΔ
nerf peerDependencies • require()͢Δpackagedependency • testίʔυͷதͰrequire͢Δpackage devDependency • peerDependenciesࠞཚͷݪҼʹ •
See also: https://github.com/npm/npm/issues/5080
better CLI search • ͍·ͷnpm searchɺ͏গ͠վળͷ༨͕͋Δ • npmjs.com Ͱվળ͕ྃͨ͠Βɺ CLIʹػೳΛ࣋ͬͯ͘Δ
• Ecosystem, CollectionsͳͲ
notes • npm install -g npm npm@3͕betaͳ͏ͪɺnpm@2ͷ࠷৽͕ೖΔ • npm install
-g npm@3 npm@3ͷ࠷৽͕ೖΔ • ҆ఆੑͱޙํޓͷͳ͍มߋΛίϛϡχςΟʹೝΊ ͯΒ͏·Ͱϕʔλͷ··
• peerDependencies • engineStrict • npm view breaking changes
peerDependencies • Πϯετʔϧ͞Εͳ͘ͳΔ • Πϯετʔϧ͞Ε͍ͯͳ͍ͱɺwarning͕ग़Δ
engineStrict • ͋·ΓΘΕ͍ͯͳ͔ͬͨ • ܯࠂͷදࣔͷΈͱͳͬͨ • npm config set engine-strict
trueͰɺengines field ΛݩʹengineStrictͷڍಈΛ࠶ݱՄೳ
npm view • Objectͷ͕1ͭͷͱ͖ɺArrayΛฦ͢Α͏ʹͳͬ ͨ • e.g. Before: versions: '0.0.1'
After: versions: [ '0.0.1' ]
• Flat, flat, flat! • The multi-stage installer • Install:
it works different! • Shrinkwraps: they are a-changin'! • The Age of Progress (Bars)! new features
Flat, flat, flat! • node_modulesҎԼ͕ɺՄೳͳݶΓflatʹͳͬͨ • node_modulesҎԼʹɺωετ͞Εͣʹinstall͞Ε Δ • ಉ໊͡લͷҧ͏versionͷdependencyʹґଘͨ͠
module͕͋Δͱ͖ɺͦΕͧΕͷmoduleͷԼʹωε τ͞Εͯinstall͞ΕΔ
The multi-stage installer • dependency tree realization • read =>
eval => apply => display • Detail: https://github.com/npm/npm/issues/ 5919#issuecomment-51858095
Install: it works different! • npm ls, npm outdatedʹӨڹ •
node_modules͕flatʹͳͬͨҰํͰɺtreeਖ਼֬ʹ ࢠؔΛදࣔ͢Δ
Shrinkwraps: they are a-changin'! • ॳճͷnpm-shrinkwrap.jsonແ͠ͷinstall ೋճͷnpm-shrinkwrap.json༗ΓͰinstall ͜ΕΒႈͰ͋Δ͖ • npm-shrinkwrap.json͕͋Δঢ়ଶͰpackage.jsonΛ
ߋ৽ͨ͠߹ɺө͞ΕΔ͖(kinda `—save` opt) • node_modules͕flatʹͳͬͨͷͰɺshrinkwrapʹ ө
The Age of Progress (Bars)! http://blog.npmjs.org/post/110290693555/npm-weekly-4
Flat, flat, flat! http://blog.npmjs.org/post/111968476155/npm-weekly-6
• npm ping • npm install —no-progress • npm team
• npm access • npm install —only=dev v3.1 - v3.3: Minor updates These features are from v2.13.0 and v2.14.0
npm ping SYNOPSIS npm ping [--registry <registry>]
npm ping • registry͕ਖ਼ৗ͔pingΛ࣮ߦͯ͘͠ΕΔ • API༻్ɺΦϑϥΠϯରԠͷੴͩͱࢥ͍·͢
npm team SYNOPSIS npm team create <scope:team> npm team destroy
<scope:team> npm team add <scope:team> <user> npm team rm <scope:team> <user> npm team ls <scope>|<scope:team> npm team edit <scope:team>
npm team • scoped packageΛɺGitHubͷΑ͏ʹorganizer୯Ґ ͰཧͰ͖ΔΑ͏ʹͳΔɻΒ͍͠ • Կ͔ࢼͨ͠ΜͰ͕͢·ͩಈ͍ͯͳ͍ͷͰௐࠪத
• http://blog.npmjs.org/post/122450408965/npm-weekly-20-npm-3-is-here-ish • http://blog.npmjs.org/post/91303926460/npm-cli-roadmap-a-periodic-update • http://blog.npmjs.org/post/94662089625/the-future-of-the-npm-website-lets-map-this • http://blog.npmjs.org/post/110290693555/npm-weekly-4 • http://blog.npmjs.org/post/111968476155/npm-weekly-6
• https://github.com/npm/npm/blob/master/CHANGELOG.md • https://github.com/npm/npm/issues/5919#issuecomment-51858095 • https://github.com/npm/npm/issues/5080 • https://twitter.com/othiym23 • http://www.infoq.com/news/2015/06/npm • https://github.com/npm/npm/releases/tag/v2.13.0 • https://github.com/npm/npm/releases/tag/v2.14.0 • http://windows.microsoft.com/ja-jp/windows/file-names-extensions-faq#1TC=windows-7 • https://github.com/npm/npm/search?q=enoent&ref=cmdform&type=Issues Reference links
Happy Hacking!