こんにちは!npmはGitHub、そのGitHubはMicrosoftってことでフロントエンド周りをMSが制覇しつつある今日この頃を感じるMizutani(@sirycity)です。あとVSCodeとTypeScriptもMicrosoftだね! 今日はそんなMS帝国の一角、npmとそのライバル yarnについてです。僕は最初npmを使っていて、yarnが出たタイミングで乗り換えたけどまたnpmに戻ってきました。そんな話。 npmとyarnについて npmとyarnについてざっくり説明します。 npmはJavaScriptの公式パッケージマネージャーです。結構昔からあるやつ。yarnはJavaScriptの非公式パッケージマネージャーです。後から出てきたやつで、npmの弱点を補うようなやつです。ソフトウェアあるあるだね。 yarnの方が良い所 機能としてはyarnの方が優秀と言って良いと思
yarn と npm の栄枯盛衰2021 年 8 月に yarn の v3 がリリースされました。2020 年の同月あたりに yarn v2 がリリースされたので、約 1 年ぶりのメジャーバージョンアップになります。 v1 → v2 のパラダイムシフトは強烈でしたが、 v2 → v3 は berry というパッケージ名は相変わらずで、 v2 の正統なバージョンアップでありちょっとだけ物足りなさを感じてます。 Get Started なにはともあれ、とりあえずは触ってみましょうか。 Node.js ≥ 16.10 であれば、 Corepack を使って以下のコマンドで yarn v3 をインストールできます。 $ corepack enable $ corepack prepare yarn@3.0.0 --activate # yarn.lock や README.md が生成される $
本記事では、npmとyarnについて解説していきます。 そもそもnpmとは何か?なぜ必要なのか?といった基本的なことから、npmとyarnどちらが良いのかといった発展的なことまで解説していくので、参考になるはずです。 これらの知識はフロントエンド開発をする上で必須となりますので、是非この記事を参考にしてください。 そもそもnpmとは? npmやyarnは、nodeのパッケージを管理するためのツールになります。 具体的には、パッケージのインストールやアンインストール、アップデートなどをすることができます。 「そんなことをしなくても普通にインストールすれば良いのでは?」と思うかもですが、それは難しいです。 なぜなら、パッケージaを使うためにパッケージbが必要といった依存関係が存在するからです。 例えば、next.jsを使うためにはreactが必要みたいな感じです。 その依存関係を全て手動で管理
人気オープンソースライブラリ「colors.js」と「faker.js」の開発者であるMarak氏が、これらのnpmライブラリを意図的に破壊しました。colors.jsおよびfaker.jsに依存しているプロジェクトは多数存在しているため、その影響が懸念されています。 Dev corrupts NPM libs 'colors' and 'faker' breaking thousands of apps https://www.bleepingcomputer.com/news/security/dev-corrupts-npm-libs-colors-and-faker-breaking-thousands-of-apps/ Open source developer corrupts widely-used libraries, affecting tons of projects
追記: 2022年1月11日 2:29 JSTにDoS脆弱性としてセキュリティアドバイザーが出されて、悪意あるバージョン(1.4.1や1.4.2)はnpmからunpublishされ、npmの最新は安全なバージョンである1.4.0へと変更されました。 Infinite loop causing Denial of Service in colors · GHSA-5rqg-jm4f-cqx7 · GitHub Advisory Database 2022-01-08 に colors というnpmパッケージにDoS攻撃のコードが含まれたバージョンが1.4.44-liberty-2として公開されました。 GitHub: https://github.com/Marak/colors.js npm: https://www.npmjs.com/package/colors 問題についてのIssu
本業はiOS開発なのですが、6月頃から個人開発でWebフロントを触っています。 Webフロントに入門するときに、開発の前提知識・専門用語が多すぎて、脳が処理しきれない状態になりました。 これでも数年前のより混沌としてた時期よりは安定してきているように思うんですが、それでもやはりカオス感は否めませんでした。 Webフロントエンド開発の見取り図があればいいのにと思ったので、自分でちょっとつくってみようと思いました。 個別の技術要素の情報は豊富にある(ありすぎると言ってもいいかもしれません)んですが、全体像がよくわからないので、 たとえば「TypeScriptで開発した方がいいのか?」とか、「Babelとかwebpackってインストールしなきゃいけないの?」とか、 そういう素朴な疑問が学習進めて行っても、なかなか解消できなかったので、いい感じのざっくり感でまとめられたらと思います。 この記事で全
最近猛烈にスターを集めているビルドツール、Viteを触ってみたので簡単に紹介します。 この記事はVite v0.19.1時点での情報です。 Viteとは? ViteはVue.jsの作者のEvan You氏が開発中のノーバンドルなビルドツールです。 ネイティブのESモジュールのインポートを利用しバンドル不要で高速に動作するdevサーバーと、Rollup.jsをベースとしたプロダクションビルド機能を提供します。 設定不要で.vueのSFC(Single File Components)をコンパイルできて、さらにデフォルトで今開発中のVue3.0が使えます。 しかも、vue-cliのようにVue.js限定ではなく、React、Preactにも対応しています。 注意 Still experimental, but we intend to make it suitable for producti
package.jsonのdependenciesとdevDependenciesの使い分けについて、いまさらですがまとめます。 dependenciesとdevDependenciesの違い 例えば、sampleという名前のパッケージを開発しているとします。 dependenciesにはrequest、devDependenciesにはmochaが書かれているとします。 { "name": "sample", "dependencies": { "request": "^2.81.0" }, "devDependencies": { "mocha": "^3.4.2" } } //このほかの要素は省略します 開発者がpackage.jsonがあるディレクトリでnpm installを行うと、dependenciesに書かれているパッケージもdevDependenciesに書かれているパッ
この投稿ではnpmコマンドで、ローカルのパッケージをインストールする方法を紹介します。 通常npm intallはnpmjs.comで公開されたパッケージをダウンロードしてきてインストールしますが、ここで説明するのはローカルにのみ存在する自作のライブラリをinstallする方法です。 (yarnで同様のことをする方法は、「Yarnでローカルのパッケージをaddする方法」をご覧ください) やりかた ローカルのパッケージをインストールには、単純にインストールしたいパッケージのファイルパスをnpm intallの引数にします: ローカルパッケージをインストールする具体例 少し具体例をもとに説明します。 以下の図のように、myappパッケージとmylibパッケージがあり、myappからmylibを使いたい例を見てみましょう。 mylibのindex.jsでは、helloWorld変数が提供されてい
2019/12/24追記 npmとyarnの脆弱性が報告されています。 npmとyarnの脆弱性とpostinstall - Cybozu Inside Out | サイボウズエンジニアのブログ npmの利用者としてやるべきことは、 npmのバージョンを6.13.4以上にあげる yarnのバージョンを1.21.1以上にあげる 概要 npmとyarnの「よく使う」から「ときどき使う」くらいまでのコマンド早見表です。 環境 Windows 10 Professional Nodist 0.8.8 参考 npm Documentation CLI の紹介 | Yarn バージョン Node.jsおよびnpmはNodistでインストール、yarnはnpmでインストールしました。 Node.js
最近よく耳にするyarnとやらを使ってみた、その備忘録として。 yarnとは Facebook,Exponent,Google,Tildeとの共同チームによって生まれた新しいパッケージマネージャ。 npmとの互換性があるので、既存のpackage.jsonはそのまま使える。 Lockfile ユーザやデバイス間でのライブラリのバージョン違いを無くす。 npmのshrinkwrapに相当する機能。 インストール Macでhomebrewを使っているなら $ brew update $ brew install yarn で、.bash_profileにPATHを通す。 export PATH="$HOME/.yarn/bin:$PATH" コマンド npm yarn
最近のWebのフロントエンド開発ではライブラリの管理を行うパッケージマネージャーの採用が主流になってきています。たとえば、タスクランナーのGulpやGruntであったり、SassやTypeScriptのコンパイルのためにNode.jsノード・ジェイエス(npm)を導入している方は多いでしょう。 JavaScriptのパッケージマネージャーとしては「npmネヌ・ピー・エヌ」が有名ですが、2016年10月にFacebookが新しいパッケージマネージャー「Yarnヤァン」を公開しました。 Yarnはnpmと互換性のあるJavaScriptのためのパッケージマネージャーで、「インストールが高速」「より厳密にバージョンを固定」「セキュリティが高い」といった魅力があります。弊社はnpmからYarnに乗り換えて早3年、快適に開発に利用しています。本記事では、npmの経験者に向けてYarnの利点と使い方を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く