こんにちは!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ってインストールしなきゃいけないの?」とか、 そういう素朴な疑問が学習進めて行っても、なかなか解消できなかったので、いい感じのざっくり感でまとめられたらと思います。 この記事で全
Google日本語入力 長らくGoogle日本語入力を使っているのでデフォルトのIMEだと違和感がある(囲い込まれてる) 設定の[キーボード]→[入力ソース]で 「ひらがな(Google)」と「ABC」だけを残してあとを削除 トラックパッドの設定 前のPCでもタップでクリックできるようにしていたので [設定]→[トラックパッド]→[タップでクリック]にチェックを入れる ディスプレイの配置 サブモニターをPCの上に配置したい [設定]→[ディスプレイ]で設定 TouchBarの予測変換を非表示に タイプするときにTouchbarがテカテカして目障りなので… [設定]→[キーボード]→[ユーザ辞書]→[Touchbarに入力候補を表示]のチェックを外す
最近猛烈にスターを集めているビルドツール、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に書かれているパッ
Macにhomebrewでyarnをインストールするメモです。 最近 macOS Catalinaに移行したばかり。 とりあえず、$ brew install yarn を実行。 $ brew install yarn ==> Installing dependencies for yarn: icu4c and node ==> Installing yarn dependency: icu4c (...なんやかんや...) ==> Installing yarn xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun Error: An exc
この投稿では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
エディタで Gemfile に追加してもよいです。 rails new したときに --webpack オプションがあれば、すでに入っています。 2. webpacker 関連ファイルをごっそりインストールします webpacker 2 系で生成した謎の設定ファイルや項目が webpacker 3系でほとんどなくなっていたりするので、更新する場合はここで大量の差分がでるかもしれません。なのでよくわからなくなった場合は、いったん config 下の webpacker 関連を消して webpacker 3 系で綺麗に入れなおすのがおすすめです。 3. yarn で必要なライブラリをインストールします
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く