Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
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.3k
amplify-cliで追加したfunctionに 環境変数・シークレットを設定する機能が どのように実現されたか / amplify-env-vars
watilde
0
1.4k
Amplify Japan User Group and OSS
watilde
0
1.2k
Web VitalsとJavaScriptエラーの可視化 - フロントエンドにおけるObservabilityとは / visualize-web-vitals-and-javascript-error
watilde
6
2.8k
Firefighting planner
watilde
1
140
Doctor Wombat - A debug guide to using npm.
watilde
0
550
Asynchronous wombats - some of the communication issues from our differences we face on GitHub
watilde
0
570
Write a song in JavaScript
watilde
3
780
npm update -g npm
watilde
5
2.9k
Other Decks in Programming
See All in Programming
Why Kotlin? 電子カルテを Kotlin で開発する理由 / Why Kotlin? at Henry
agatan
2
7k
Navigation 3: 적응형 UI를 위한 앱 탐색
fornewid
1
310
AIエンジニアリングのご紹介 / Introduction to AI Engineering
rkaga
5
2k
【CA.ai #3】ワークフローから見直すAIエージェント — 必要な場面と“選ばない”判断
satoaoaka
0
240
【Streamlit x Snowflake】データ基盤からアプリ開発・AI活用まで、すべてをSnowflake内で実現
ayumu_yamaguchi
1
120
Tinkerbellから学ぶ、Podで DHCPをリッスンする手法
tomokon
0
120
從冷知識到漏洞,你不懂的 Web,駭客懂 - Huli @ WebConf Taiwan 2025
aszx87410
2
2.2k
AWS CDKの推しポイントN選
akihisaikeda
1
240
251126 TestState APIってなんだっけ?Step Functionsテストどう変わる?
east_takumi
0
310
ハイパーメディア駆動アプリケーションとIslandアーキテクチャ: htmxによるWebアプリケーション開発と動的UIの局所的適用
nowaki28
0
410
エディターってAIで操作できるんだぜ
kis9a
0
710
STYLE
koic
0
170
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
58
6.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
122
21k
Unsuck your backbone
ammeep
671
58k
GraphQLとの向き合い方2022年版
quramy
50
14k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.8k
It's Worth the Effort
3n
187
29k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.2k
Navigating Team Friction
lara
191
16k
Building a Scalable Design System with Sketch
lauravandoore
463
34k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
How GitHub (no longer) Works
holman
316
140k
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!