PLAID で i18n おじさんエンジニアしてる kazupon です。 この記事は plaid advent calendar 2019 の 17日目の記事です。 はじめに 筆者は、PLAID のプロダクト開発以外にも、オープンソースソフトウェア (以下 OSS )開発者として vue-i18n といったオープンソースプロジェクトを持っており、Node.js においては npm または yarn といったパッケージマネージャーと呼ばれるもので、Node.js そして必要に応じてブラウザ向けに動作するコードをパッケージにして OSS として配布しています。 npm / yarn で配布する OSS は、一般的には semver のようなセマンティックバージョンニングの仕様に沿った形で、バージョンをリリース毎に発行して管理して、npm publish や yarn publish によって
最近猛烈にスターを集めているビルドツール、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
GitHub - nodejs/corepack: Zero-runtime-dependency package acting as bridge between Node projects and their package managers
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Software Package Management with AWS CodeArtifact | Amazon Web Services
AWS News Blog Software Package Management with AWS CodeArtifact Software artifact repositories and their associated package managers are an essential component of development. Downloading and referencing pre-built libraries of software with a package manager, at the point in time the libraries are needed, simplifies both development and build processes. A variety of package repositories can be use
TL;TD package.jsonに記述するフィールドで、peerDependencies で定義したバージョンを満たしてなくても警告を出さなくするためのオプションを設定することができる (2020/05/03時点) パッケージを公開する人以外はあんまり気にしなくても大丈夫そう そもそもpeerDependencies とは peerDependencies は、あるモジュールXに対するインタフェースを持っており、モジュールXから参照されることを想定するが、モジュールXのどこまでにバージョン互換性を持っているかを表記したものです。 例えば eslint-plugin-vue は、 eslint でVueファイルを扱うためのプラグインですが、どのバージョンの eslint に対して互換性のあるプラグインなのかがpeerDependencies に記述されています。
GitHub - orogene/orogene: Makes `node_modules/` happen. Fast. No fuss.
Makes node_modules/ happen. Fast. No fuss. Orogene is a next-generation package manager for tools that use node_modules/, such as bundlers, CLI tools, and Node.js-based applications. It's fast, robust, and meant to be easily integrated into your workflows such that you never have to worry about whether your node_modules/ is up to date. It even deduplicates your dependencies using a central store,
Yarn 2.1 🐱🏍 Git Workspaces, Focused Installs, Loose mode, Live Playground, ...
Yarn 2.1 🐱🏍 Git Workspaces, Focused Installs, Loose mode, Live Playground, ... How are you doing since January? So many things happened since then. I hope you're all safe, wherever you are. As for today, we'll be here to talk about Yarn. And as far as Yarn goes I'm happy to report that our work continued at a very good pace! So good in fact that it's now time to release the next minor build, th
はじめに 皆さんはnpm, yarn, pnpmどのPackage Managerを使っていますか？ yarnしか使わない！という方もいるかもしれませんが、pnpm評判いいみたいだし使ってみようかなとか、チーム開発では安定のnpmなんだよなとか、複数のPackage Managerを使用するケースって少なくないかと思います。 そういった場合、それぞれのコマンドを覚えるのも面倒ですし、プロジェクトに応じて頭の切り替えをしないといけないのは大変です。 本記事は、そういった悩みを解決する方法を紹介します。 ni niはnpm,yarn,pnpm,bunに対応していて、それぞれのlockfileを読み取って、適切なコマンドを実行してくれるPackage Managerです。 niのコマンドは短く、わかりやすいのですぐ覚えられると思います。 ちなみに、作者はVueやNuxt、Viteなどのコアチーム
Yarn にはワークスペースという機能があり、これを使うとひとつのリポジトリで複数の npm パッケージを開発できるようになり、効率的に作業を進められるようになる。 この記事の内容は、Yarn のv1.22.4で動作確認している。 シンボリックリンクが作られ、パッケージをまたいだ開発をしやすくなる ワークスペースをつかうためには、リポジトリのルートディレクトリにpackage.jsonを作成し、workspacesフィールドを指定する必要がある。 また、このディレクトリをパッケージとして公開することはないので、privateフィールドをtrueにしておく。 { "private": true, "workspaces": ["project-a"] } 上記の例では、project-aというディレクトリを、ワークスペースの対象としている。 次に、以下の内容の./project-a/pack
GitHub - lirantal/npq: 🎖safely* install packages with npm or yarn by auditing them as part of your install process
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
なぜ yarn を使うのか - fsubal
yarn.lock にマージコンフリクトがある状態でガン無視して yarn install すると conflict が直るから
Yarn Workspacesを利用したMonorepo環境の構築 | PR TIMES 開発者ブログ
PR TIMESにおけるフロントエンド開発基盤の構築 こんにちは、21新卒エンジニアの柳(@apple_yagi)です。今月から新卒2年目となり、一年早かったなとしみじみしています。 昨年PR TIMESでは企業ページをフルスクラッチで... しかし、この時点では Frontend のコードベースを一つにまとめただけで、各プロジェクトで共通のコンポーネントやスタイルを一元管理するまでには至っていませんでした。 今回、Yarn Workspacesを利用してMonorepoを構築し、共通コンポーネント・スタイルの共有を行ったのでご紹介します。 本エントリーでは、Yarn Workspacesの機能を使用して、1つのリポジトリで複数のプロジェクトを管理している構成のことをMonorepoと指します。
JSer.info #563 - Yarn 3.1がリリースされました。 Yarn 3.1 🎃👻 Corepack, ESM, pnpm, Optional Packages ... - DEV Community 👩💻👨💻 berry/CHANGELOG.md at master · yarnpkg/berry yarn init -2でNode v16.9.0からサポートされたCorepackのpackageManagerフィールドに対応しています。 また、PnPでのEMSサポート、新しいインストールモードとしてnodeLinker: pnpmのサポートしています。 また、optionalDependenciesで指定したアーキテクチャだけをダウンロードするsupportedArchitecturesの設定を追加しています。いままでのYarnはoptionalDepen
The npm blog has been discontinued. Updates from the npm team are now published on the GitHub Blog and the GitHub Changelog. tl;dr - Update to npm v6.13.4 as soon as possible on all your systems to fix a vulnerability allowing arbitrary path access. The Vulnerabilities In versions of npm prior to 6.13.3 (and versions of yarn prior to 1.21.1), a properly constructed entry in the package.json bin fi
GitHub - wclr/yalc: Work with yarn/npm packages locally like a boss.
When developing and authoring multiple packages (private or public), you often find yourself in need of using the latest/WIP versions in other projects that you are working on in your local environment without publishing those packages to the remote registry. NPM and Yarn address this issue with a similar approach of symlinked packages (npm/yarn link). Though this may work in many cases, it often
lerna/yarn/npm workspacesとTypeScript Project Referencesの設定を同期するツール TypeScript Project Referencesは、tsconfig.json同士の依存関係を定義することで、効率的なビルドが可能になる仕組みです。 Project Referencesの仕組みを使うことで、monorepoなど一つのリポジトリ内で複数のTypeScriptで書かれたパッケージがある場合に効率的なインクリメンタルビルドなどができます。 また、VSCodeなどのコード補完に使われるTS-Serverなどのスキャンも効率的になります。 Migrating Large TypeScript Codebases To Project References — Developer Tooling Optimizing multi-packag
まだパッケージマネージャーの打ち間違いで消耗してるの？ 初手煽りタイトル失礼します。よだかと申します。 僕はフリーランスでいくつかプロジェクトをやらせてもらっているのですが、プロジェクトごとにパッケージマネージャーが違ったりします。 これがかなり辛く、yarnのプロジェクトでnpm installしてpackage-lock.jsonを生成してしまったり、npmのプロジェクトでyarn installしてyarn.lockを生成してしまったり。。 果ては、yarn devなのか、npm run devなのか、など気をつけないいけないことがかなり多いです。 そこで今回ご紹介したいのがniというツールです。 niについて niについて説明するために、READMEを見てみましょう。 まずは一行目です。 npm i in a yarn project, again? F**k! とても強い思いから
yarnをv1からv2(Berry)へ移行する
yarnのv2(Berry)が登場してしばらく経ちましたが、依然v1を使い続けている方が多いかと思います。最近になってやっと問題なく移行できると判断できるようになってきたので、この度移行してみました。 yarn v1の問題点 散々各所で語られていると思いますが、簡単にyarnのv1の問題点をまとめてみます。 1. node_modulesのサイズが肥大化する 中規模程度のリポジトリでも 2GB を前後になるのは当たり前です。 そのためとにかく重いのと、Node.jsを使う複数のリポジトリで開発をしているとこの容量だけでマシンのディスク残量を消費するので マシンにも優しくありません。 2. yarn add や yarn removeを繰り返すと頻繁に壊れる yarn v1の一番の問題は恐らくこれです。 壊れるというのは具体的には依存関係の参照が整合性が取れなくなって、追加したコマンドの実行
npm Blog Archive: npm v7 Series - Why Keep `package-lock.json`?
The npm blog has been discontinued. Updates from the npm team are now published on the GitHub Blog and the GitHub Changelog. << Arborist Deep Dive >> Beta Release! One common question we’ve gotten a few times now, once we announce that npm v7 will include support for yarn.lock files, is “Why keep package-lock.json at all, then? Why not just use yarn.lock only?” The simple answer is: because yarn.l
Open SourceProductSecurityYarn support for security alertsYarn now supports security alerts for public and private repositories. GitHub security alerts help developers stay on top of vulnerabilities that impact their dependencies. JavaScript developers already receive alerts for their NPM-based projects that use package.json and package-lock.json manifests. Now developers who use Yarn for dependen
npm パッケージを CLI ツールとして機能させる仕組みについて - 30歳からのプログラミング
npm パッケージのなかには、CLI ツールとしての機能を持っているものがある。 ESLint や Mocha、Jest などは、多くの人が使っていると思う。 この記事では、それらのパッケージがどのようにして CLI ツールとして機能しているのか、その仕組みについて説明する。 動作確認に使った npm のバージョンは6.14.5。Yarn は1.22.4。 package.json の bin フィールド npm パッケージに CLI ツールとしての機能を持たせるためにはまず、package.jsonのbinフィールドでコマンド名とファイル名をマップさせる必要がある。 具体的な記述を見たほうが早いので、題材としてcowsayのv1.4.0をインストールする。 $ npm init -y $ npm i cowsay@1.4.0 node_modulesにcowsayがインストールされている
# インストール済みの場合はまずアンインストールする npm uninstall -g yarn # v2 を使いたければタグを明示してインストールする npm install -g yarn@berry V1 と V2 の違い 一次情報はこちらのエントリを参照のこと。スクショは公式から引用。 https://dev.to/arcanis/introducing-yarn-2-4eh1 個人的に特に気になっているものに 🍎 (赤いリンゴ) をつけておく。 色々途中なので変化したり間違ってる部分はご容赦ください。 🍏 CLI出力の改善 yarn v1 では絵文字が使われて可愛らしい出力だったが、v2 からは処理の具体的な内容を表示するように変化した。 色はアクセシビリティの関係でまだ変化するかもしれないらしい。 出力には YN***** という番号が割り当てられ、この番号をもとに出力自体
3者の公式 概要 3者ともJavascriptのパッケージマネージャー。 npm はNode.jsをインストールすれば一緒にインストールされる。 yarn: npmと互換性があり、npmで使用していたプロジェクト設定ファイル（package.json）がそのまま使える。 pnpm: 同じくnpmと互換性があり、ディスクスペースの使用量と速度が大幅に改善されている。 先に npmとyarnとpnpmの違い2021 からわかりやすい結論。 筆者のおすすめ 初心者、もしくは複数人開発であればnpm をおすすめします。 標準ツールのため、Nodeと一緒に複数人でバージョンを揃えやすい nodeを入れれば追加でのインストールが不要 標準ツールのため、信頼性があり、ドキュメントも多い 現在はインストールがそこまで遅くはない 開発でパッケージマネージャーを触ることは最初期や機能追加以外は少ない 個人開発
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
JSer.info #666 - Node.js 21がリリースされました。 Node.js 21 is now available! | Node.js 奇数バージョンはいわゆる開発バージョンとなりLTSにはなりません。 Node.js 21では、Fetch/WebStreams APIのStable化、V8 11.8へのアップデート、node --testでのglobのサポートが追加されています。 また、モジュールのデフォルトをESMにできる--experimental-default-type、Magic BytesでWasmを判定する--experimental-wasm-modulesの追加されています。 これらのフラグについては次の記事で解説しています。 Deep Dive: Node.jsのESMデフォルト化への道 - JSer.info また、fs.writeFileにfl
前回に続きnpmの機能について扱います。今回はnpmとコマンドラインツールとの関わりを中心に見ていきます。 ←前 目次 次→ 注意: Windowsとそれ以外では、npmのフォルダ配置は異なります。Windowsでの挙動についてはnpm-foldersを参照してください。 グローバルインストール npmは通常、Node.jsの配布物に同梱されていますが、yarnは同梱されていません。yarnを使う場合は次のようなコマンドを実行します。 これによって以下のような効果が発生します。 $PREFIX/lib/node_modules/yarn 以下にyarnの中身がインストールされる。 $PREFIX/lib/node_modules/yarn/node_modules 以下にyarnの依存関係がインストールされる。 $PREFIX/bin にシンボリックリンク yarn, yarnpkg が生
deps: add Yarn 1.22.5 by arcanis · Pull Request #37277 · nodejs/node
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
M1 Macのセットアップ・メモ
Google日本語入力 長らくGoogle日本語入力を使っているのでデフォルトのIMEだと違和感がある（囲い込まれてる） 設定の［キーボード］→［入力ソース］で 「ひらがな（Google）」と「ABC」だけを残してあとを削除 トラックパッドの設定 前のPCでもタップでクリックできるようにしていたので ［設定］→［トラックパッド］→［タップでクリック］にチェックを入れる ディスプレイの配置 サブモニターをPCの上に配置したい ［設定］→［ディスプレイ］で設定 TouchBarの予測変換を非表示に タイプするときにTouchbarがテカテカして目障りなので… ［設定］→［キーボード］→［ユーザ辞書］→［Touchbarに入力候補を表示］のチェックを外す
TL; DR: yarn v1 の場合、 yarn.lock から当該のパッケージのセクションを削除して yarn install すればアップグレードできる。 2021年9月9日追記： yarn v2 以降では yarn up -R パッケージ でアップグレードできるようになった。 困ったこと GitHub にソースコードをホストしているとある npm パッケージにおいて、 GitHub の Security Alerts が fstream < 1.0.12 の脆弱性を報告した。 yarn upgrade fstream で最新バージョンにアップグレードしようとしたが…… $ cd my_npm_pkg $ yarn upgrade fstream yarn upgrade v1.16.0 [1/5] 🔍 Validating package.json... [2/5] 🔍 Res
yarn workspaceでMonorepo+TypeScript環境をつくる | suzukalight.com
Monorepo 環境で、yarn workspace を使って、create-react-app --typescript した client ワークスペースと、prisma2 で作成した server ワークスペースを共存させる手順のメモです。Lint, Prettier, Husky の設定も行います。 前提条件完成品手元で同様の手順を踏んだリポジトリを、GitHub 上に公開していますので、併せてご参照ください。 https://github.com/suzukalight/monorepo-react-prisma2 動作環境MacNode.js v10.16.0npm v6.9.0create-react-app (react-script v3.1.1)prisma2 v2.0.0-preview-5TypeScript v3.5.3Lint, Prettier, Husky
yarnのhoistingを理解する
yarnのv3がそろそろ来そうな気配を感じるものの、恐らくまだしばらくはnode_modulesと付き合う事になりそうなので、今一度yarnにおけるnode_modulesのhoistingについて理解しなおそう、ということを試みた記事です。 前半はhoistってそもそも何？的な話で、後半は仕組みの話です。 後半まで飛ばしたいかたはこちらからどぞ。 yarnにおけるhoistingとは transitive dependenciesをより上位のディレクトリにhoist（巻き上げ）すること。 transitive dependeniesって？ 推移的である依存関係のこと。（日本語の正式名称的なものがあるのかどうかは知らない。たぶんなさそう） 推移的であるとはどういうことか、一階述語論理で書くと以下のようになる。 Note: 一階述語論理とは？については以前記事を書いたので参考にどぞ RRRを
メモ。 npm では、パッケージのダウングレードを行う場合、一旦パッケージを削除してから再度インストールし直す必要があります。 $ npm remove cowsay $ npm install --save cowsay@1.0.0 yarn であれば、 yarn upgrade [パッケージ名]@[version] で指定したバージョンにそのままダウングレードしてくれます。もちろんアップグレードも可能。 $ yarn upgrade cowsay@1.0.0 yarn は楽でいいですね。個人的には npm と違ってデフォルトでローカルパッケージインストールなのが安心です。
Yarn 1 vs Yarn 2 vs NPM
At Infinite Red, we’ve been using Yarn for several years now — virtually since it was released. We even released an NPM vs Yarn cheat sheet that has been downloaded thousands of times! Recently, Yarn 2 was announced, with PNP (plug ’n’ play) support, constraints, and many other improvements. The announcement brought about some controversy in the community due to how some of the technical decisions
この投稿ではnpmコマンドで、ローカルのパッケージをインストールする方法を紹介します。 通常npm intallはnpmjs.comで公開されたパッケージをダウンロードしてきてインストールしますが、ここで説明するのはローカルにのみ存在する自作のライブラリをinstallする方法です。 (yarnで同様のことをする方法は、「Yarnでローカルのパッケージをaddする方法」をご覧ください) やりかた ローカルのパッケージをインストールには、単純にインストールしたいパッケージのファイルパスをnpm intallの引数にします: ローカルパッケージをインストールする具体例 少し具体例をもとに説明します。 以下の図のように、myappパッケージとmylibパッケージがあり、myappからmylibを使いたい例を見てみましょう。 mylibのindex.jsでは、helloWorld変数が提供されてい
Big Data: Google Replaces YARN with Kubernetes to Schedule Apache Spark
Will real-time data processing replace batch processing? At Confluent's user conference, Kafka co-creator Jay Kreps argued that stream processing would eventually supplant traditional methods of batch processing altogether.
型チェックや静的コード解析については、普段エディターや IDE で自動的に実行していると思いますが、 CI 用に定義しておくと便利です。また、これらが明示的に定義してあることでジョインしたばかりのプロジェクトメンバーがそれぞれの目的でどのツールを使うかを把握することが可能です。 スクリプト名の修飾 例えば development 環境と production 環境でビルド用の設定が異なる場合など、実行すべきスクリプトを変更したいときがあります。これは慣習的に : コロンでつないで環境名を指定することが多いです。例えば普段使う build コマンドは development 環境用とし、 build:prod コマンドに production 環境用のスクリプトを定義する、などです。 yarn における scripts プロパティの扱い yarn も同様の仕組みを持っており、 yarn ru
Voltaは、JavaScriptツールチェーンをコードで管理できるユーティリティで、Infrastructure as Codeとほぼ同様の方法で、ノード、パッケージマネージャ、パッケージバイナリといったJavaScriptツールの管理が可能になっている。 今回、リリースされた「Volta 1.0.0」では、バージョン0.9.0で追加された、パッケージマネージャを用いてツールを直接インストールする仕組みが拡張されたnpm linkが導入され、異なるnpmバージョン間でもローカルパッケージとリンクできるようになった。また、異なるノードバージョンを使用している2つのプロジェクトをリンクしようとした場合には、非互換性についての警告を発する機能も備えている。 そのほか、パッケージマネージャーがインストールされたパッケージをすべて検出し、最新バージョンへアップグレードする機能も搭載された。 近い将
Yarn
yarn workspaceでmonorepo+TypeScript+Lint環境をつくる - Qiita
monorepo環境で、yarn workspace を使って、create-react-app --typescript した client ワークスペースと、prisma2 で作成した server ワークスペースを共存させる手順のメモです。Lint, Prettier, Huskyの設定も行います。 前提条件 完成品 手元で同様の手順を踏んだリポジトリを、GitHub上に公開していますので、併せてご参照ください。 動作環境 Mac Node.js v10.16.0 npm v6.9.0 create-react-app (react-script v3.1.1) prisma2 v2.0.0-preview-5 TypeScript v3.5.3 Lint, Prettier, Husky ＜概説＞ワークスペース（Yarn Workspaces）とは？ デフォルトで利用できるパッケー
Hooks + multiple instances of React · Issue #13991 · facebook/react
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Pick a username Email Address Password Sign up for GitHub By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails. Already on GitHub? Sign in to your account
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ship.jsでリリースフローを改善する - Qiita
【Vite】 Vue3.0もReactも！ノーバンドルなビルドツール「Vite」を試してみる - Qiita
package.jsonのpeerDependenciesMetaってなんだ？ - Qiita
npm、yarn、pnpm それぞれのコマンドを覚えるのに疲れた方へ - Qiita
Yarn のワークスペースの初歩 - 30歳からのプログラミング
2021-10-27のJS: Yarn 3.1、Node.js 16.13.0(LTS)、Next.js 12
npm Blog Archive: Binary Planting with the npm CLI
lerna/yarn/npm workspacesとTypeScript Project Referencesの設定を同期するツール
まだyarnやnpmやpnpmの打ち間違いで消耗してるの？
Yarn support for security alerts
YarnV2 こと Yarn@berry を試してみている - Qiita
npm と yarn と pnpm 比較（2021年4月版） - Qiita
GitHub - antfu/ni: 💡 Use the right package manager
2023-10-25のJS: Node.js 21(Current)とNode.js 20.9.0(LTS)、Yarn 4、tsc --isolatedDeclarations
JSエコシステムぶらり探訪(4): npmとコマンドライン - Qiita
yarn upgrade で更新できない間接的な依存パッケージだけをアップグレードするには - Qiita
【npm/yarn】パッケージをダウングレードする - Ren's blog
npmでローカルのパッケージをinstallする方法 - Qiita
npm-scripts でチームメンバーと共通認識を作る | DevelopersIO
JavaScriptツールチェーンをコードで管理できる「Volta 1.0.0」がリリース