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がインストールされている
Keen-Slider: Easily create sliders, carousels and much more.
Library agnostic: Works well in JavaScript, TypeScript, React, Vue, Angular, React Native etc.
December 16, 2020 npm packages may include bundled TypeScript declarations. When this declaration file is published inside a package and specified using the types or typings key in the package's package.json, the npm registry will display that the package has available bindings. This change will help developers know which packages have built-in TypeScript declarations.
警告: GitHub Actions でキャッシュを使用する場合は、次の点に注意してください。 キャッシュには、機密情報を保存しないことをお勧めします。 たとえばキャッシュパス内のファイルに保存されたアクセストークンあるいはログインクレデンシャルなどがセンシティブな情報です。 また、docker login のようなコマンド ライン インターフェイス (CLI) プログラムでは、アクセス資格情報を構成ファイルに保存できます。 読み取りアクセスを持つ人は誰でも、リポジトリに pull request を作成し、キャッシュの内容にアクセスできます。 リポジトリのフォークも、ベースブランチ上にPull Requestを作成し、ベースブランチ上のキャッシュにアクセスできます。 セルフホステッド ランナーを使用する場合、ワークフロー実行のキャッシュは、GitHub 所有のクラウド ストレージに保存さ
Vue CLIを利用することでvue.jsの開発環境を簡単に構築することができます。Vue CLIで簡単に環境構築、アプリケーションの開発を行うことができますが裏側で何が行われているのかわからない人も多いのではないでしょうか。Vue CLIを利用することなしでWebpackをインストールを行いSingle File Component(単一ファイルコンポーネント)を使ってVueのアプリケーションを構築できる環境を作成してみたいという人向けに本文書を作成しています。本文書ではwebpackのインストールからSFCを使えるまでの手順をStep By Stepで丁寧に説明していますので一通り読み終えるとVueで開発を行うためにwebpackで必須な設定を理解することができます。 Vueの開発環境の構築に関する知識も深まります。 Single File Componentとは VueのSingle
The npm Blog — Changes to npm Unpublish Policy - January 2020
TL;DRUntil today, you couldn’t unpublish packages, or package versions, older than 72 hours without contacting support (background available here and here). Because this is our most popular support request, we’ve extended the ability for you to unpublish packages beyond 72 hours if your package meets certain criteria. What are we doing?npm has grown a lot over the past 10 years, and rapid growth m
package.json に記載されているパッケージのバージョンアップ方法 【 npm-check-updates, outdated 】 - Qiita
package.json に記載されているパッケージのバージョンアップ方法 【 npm-check-updates, outdated 】npmnpm-check-updates はじめに package.json に記載されているパッケージのバージョンアップには npm-check-updates というツールがとても便利なので紹介したいと思います。 結論 package.json に記載されているパッケージのバージョンアップ方法は以下の 2 つの方法があります。 方法 1 : npm outdated コマンドを使う npm outdated コマンドを実行し、アップデート情報を確認して、パッケージをひとつひとつ丁寧にアップデートする 方法 2 : npm-check-updates パッケージをつかう ← おすすめ！ npm-check-updates パッケージを利用して、アップデ
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 Quite a lot has happened in npm since our last update way back in 2019. We’re overdue for a status update on npm v7. Despite some massive distracting changes (some unfortunate, some very fortunate), development work has been proceeding steadily. Yesterd
npm の基本的な使い方
npm とは npm（Node Package Manager）は、Node.js のパッケージ（Package）を管理するツールです。 npm はパッケージをインストールする際に各種ライブラリなどの依存関係を管理・解決してくれ、パッケージの検索や更新、バージョン管理、アンインストールなどもできます。 また、npm を使ってインストールした複数のパッケージの環境を簡単に複製することができます。 npm は Node.js をインストールすると自動的にインストールされるので、使用するには Node.js をインストールする必要があります。 関連ページ： nvm を使って Node.js を Mac にインストール Node.js を Mac にインストール（nodebrew の使い方） Node.js がインストールされていれば、ターミナルで以下を実行して npm のバージョンを確認すること
Over the past years, new package managers like yarn and pnpm have emerged, enhancing how packages are downloaded. However, the npm package registry, a cornerstone of the JavaScript ecosystem, has barely evolved. Its last notable update was a “files” tab added years ago. The JavaScript language, known for its vibrant evolution, seems paradoxically mired in a distribution model that hasn’t kept pace
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
正直なところもうこの記事はいらないかなと思ったけど他のところから参照されていたりするっぽいので残しておきます 結論 npm 5.0.0 以降からは install 時にデフォルトで save してくれるので --save や -S オプションを指定する必要はない。 --save オプションとは？ パッケージのインストール時、package.json の dependencies に追加してくれる機能。 npm v5 以降はインストール時にデフォルトで package.json の dependencies に追加してくれるようになったので --save オプションは不要になった。 npm install saves any specified packages into dependencies by default. 参考 https://docs.npmjs.com/cli/insta
We combine data from multiple sources for better Software Evaluation and Comparison.
tsdocs.dev helps you browse reference typescript documentation for any package or version of a library. Made with the help of typedoc
rollup.js と TypeScript を使って npm 公開用のライブラリを作ろうとしたら、 Rollup の公式プラグインがRollup Pluginsに移動していて、 ビルド環境構築に苦労したので、雑にメモを残しておきます。 作るもの ✍ npm で公開するためのライブラリを作成する環境 モジュールバンドラに rollup.js を利用する TypeScript を使って開発する 他の npm のモジュール(CommonJS も含む)も利用できる 作成したライブラリは、汎用的に使えるようにする CommonJS、ESModule で利用できる CDN 経由でブラウザで利用できる (buble でトランスパイルし、IE でも動くように 😇) babel を利用して ES2015 まで構文変換は行うが、pollifill は利用者側に委ねる ライブラリが個々に pollifill
前回に続き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 が生
Node.jsを使用したCLIの構築方法
Node.jsを使用して構築されたコマンドラインインターフェース(CLI)は、広大なNode.jsのエコシステムを活用し、反復的なタスクを自動化することができます。また、npmやyarnなどのパッケージマネージャーを通じて簡単に配布でき、複数のプラットフォームで利用できます。この記事では、CLIの作成にNode.jsを使用するメリットとその方法、いくつかの便利なパッケージ、そして新しいCLIを配布する方法を解説します。 CLIの作成にNode.jsを使用する理由 Node.jsが人気を博した理由の1つは、npmレジストリに90万以上のパッケージを有するパッケージエコシステムであるという点です。Node.jsを使用してCLIを作成することで大量のCLI向けパッケージを含むエコシステムを利用することができます。たとえば、CLIで次のよ
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog みなさんこんにちは。UIT Front-end Dev7チームの吉澤です。主にUITが扱う社内サービスやミドルウェアの開発/運用などを行っています。またDev7チームにはLIFF（LINE Front-end Framework）というLINEが使っているフレームワークの開発をしているメンバもいます。他のUITのチームとは一風変わった特徴的なチームです。 このチームの業務の1つにUITが管理しているPrivate npm registryの拡張、関連機能開発/運用があります。実はこれに関連した全社的にnpmが使えなくなるという障害が2021/2/15にLINE社内で発生していました。今回はその障害について話しながら私たちUIT
GitHub - vicrazumov/js-bundle-size: Cross-browser extension adding JS bundle size data to npm and github pages
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
npm パッケージとして複数のエントリーポイントを公開したい場合、mainフィールドは単一のエントリーポイントしか受け付けないので、exportsフィールドを利用することになると思うけども、その仕様等についての確認メモ。 In a package’s package.json file, two fields can define entry points for a package: "main" and "exports". The "main" field is supported in all versions of Node.js, but its capabilities are limited: it only defines the main entry point of the package. https://nodejs.org/api/packages.html#p
IntroTypescript is a great addition to JavaScript. Unfortunately, not every JS package has definitions for TypeScript. Of course, you could create your custom definition in your project, but I believe that sharing these definitions makes things easier for the community: A large community maintains shared typingsThe review process could provide valuable insightsThe definition helps spread the Types
Zalgo issue with `v1.4.44-liberty-2` release · Issue #285 · Marak/colors.js
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
Open SourceSecurityWhy we’re excited about the Sigstore general availabilityThe Sigstore GA means you can protect your software supply chain today with GitHub Actions, and will power new npm security capabilities in the near future. Sigstore is a powerful new technology for signing, verifying, and protecting software supply chains, and we’re very excited by today’s general availability announcemen
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
Open SourceSecurityIntroducing npm package provenanceHow to verifiably link npm packages to their source repository and build instructions. Starting today, when you build your npm projects on GitHub Actions, you can publish provenance alongside your package by including the --provenance flag. This provenance data gives consumers a verifiable way to link a package back to its source repository and
きちんとわかる、npm install 第1回 PCにコマンドをインストールする 普段何気なく使っているNode.jsのパッケージツール「npm」。パッケージのインストールに使うnpm installの使い方と動作を解説します。まずはグローバルインストールからです。 はじめに 最近のフロントエンドでは、当たり前のように使っているNode.jsのnpmコマンド。その中でもnpm installはとりあえず、パッケージ（ライブラリ）をインストールのため、最初に実行するものという認識だけで、なんとなく使っている人も多いのではないでしょうか。 このシリーズでは、npm installにどのようなオプションがあり、どのような動作をするのかを中心に解説します。きちんと仕組みを知っておくことで、生成されたpackage-lock.jsonをどう扱えば良いのか、困った時にはどうすれば良いのかわかるようにな
GitHub Actionsとsemantic-releaseでnpmパッケージのバージョン管理・リリースノート作成を自動化してみた | DevelopersIO
こんにちは、CX事業本部のうらわです。 本記事では最近触ったGitHub Actionsとsemantic-releaseの連携についてご紹介します。 semantic-releaseとは npmパッケージのバージョン管理やnpm repositoryへのpublishを自動で行うためのツールです。GitHubと連携すると、タグとリリースノートを自動で作成してくれます。 semantic-releaseはパブリックに公開するnpmパッケージだけでなく、プライベートなnpmパッケージ・npm以外のライブラリやツールでも利用することができます。 今回はプライベートなnpmパッケージの想定で、semantic releaseとGitHub Actionsを組み合わせたバージョン管理・リリースノート作成の自動化を試してみます。 なお、本記事で作成するサンプルプロジェクトのソースコードは以下に格納し
GitHub - nachoaldamav/ultra: JavaScript package manager
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
Introducing "safe npm", a Socket npm WrapperSocket is proud to introduce an exciting new tool—“safe npm”—that protects developers whenever they use npm install. Socket is proud to introduce an exciting new tool—“safe npm”—that protects developers whenever they use npm install. Socket’s “safe npm” CLI tool transparently wraps the npm command and protects developers from malware, typosquats, install
npmにも影響を与える node-tarの脆弱性(CVE-2021-32804)について解説します。
npm pack時にsrc下の__tests__を無視したい（2021/02/08更新） - cangoxina
npm packをする際に、src下に配置したテストファイルを除外する方法です。ググってもあんまりいい回答がヒットしなかったので記事にします。 2021/02/08 更新：npm v7 に対応しました。 目次 2021/02/08 追記 TL;DR（要約） npm packで圧縮されるファイル 指定したファイルやフォルダのみをnpmパッケージに含まれるfilesフィールド npm packから特定のフォルダを除外する .npmignoreを使うとめんどくさい filesで!を使おう おわりに 2021/02/08 追記 元々は!__tests__で除外ができていたのですが、どうやら npm v7 では!__tests__が使えないことが判明しました。（npm v6 で検証していました...） 回避方法としては!**/__tests__という風にアスタリスクをつけることで npm v6/v7
Graph / visualize of npm dependencies
概ね以下のような感じになります。 町丁目レベルまでの数字は漢数字に変換します。 例: 24-2-2-3-3 => 二十四軒二条二丁目3-3 街区、地番レベルの数字は、アラビア数字に変換します。 例: 十四ーイ二十二 => 14-イ22 京都の通り名は削除します。 郡 が省略されている場合は補完します。 例: 和歌山県串本町 => 和歌山県東牟婁郡串本町 が、ケ、ヶ などの揺れを吸収し、国交省が公開する位置参照情報のデータと同じ文字になるように変換します。 旧字体は、新字体に変換します。 大字、字 は削除します。 街区、地番以降の文字列、たとえば建物名などは、そのまま返します。 京都の通り名を削除することには賛否両論あるかと思いますが、この正規化モジュールは住所の名寄せを目的としているため、そのような仕様になっています。 精度が気になる方は、以下にテストケースがありますので、そちらをご覧いた
この記事では次のブログの内容を参考にしながら、バンドルサイズに優しい tree shakeable な JavaScript ライブラリの作成方法について紹介します。細かい内容が気になる方は、是非原文の方もご確認ください。 作成方法のまとめ 結論から知りたい人向けに、まずは作成方法のまとめから記述します。バンドルサイズに優しい tree shakeable な JavaScript ライブラリを作成するためには、次の点に気をつけると良いです。 ESM 形式でライブラリを配布し、package.json の module フィールドを指定する ライブラリで使用する npm パッケージも可能な限り tree shakeable なものを利用する １つのファイルにバンドルせず、モジュールツリーの構造を保持したまま配布する package.json の sideEffects フィールドに fal
Practical Approach to Automate the Discovery and Eradication of Open-Source Software Vulnerabilities at Scale
Practical Approach to Automate the Discovery and Eradication of Open- Source Software Vulnerabilities at Scale Aladdin Almubayed Senior Application Security Engineer @ Netflix @0xshellrider @ @ Outline • The problem of open source security (5 minutes) • Attacks on open source dependencies (10 minutes) • Our approach (25 minutes) • Challenges & Future work (5 minutes) @ @0xshellrider Aladdin Almuba
Enter description here
Blogged Answers: My Experience Modernizing Packages to ESM
Random musings on React, Redux, and more, by Redux maintainer Mark "acemarke" Erikson This is a post in the Blogged Answers series. Details on the painful experiences and hard-earned lessons I've learned migrating the Redux packages to ESM Table of Contents 🔗︎ Introduction Redux Packages Background Packages and Configurations Issue History Early Attempts Migrating to Vitest Initial Alpha Testing
更新版 Web制作向けnpm-scripts 3 npm-scriptsのWeb制作向けタスクランナー Web制作は細かいやることが多いので、少しでも自動化して手作業を減らしたいと考えました。 一人で完結する作業であれば、PreprosやKoala(開発終了)などGUIのツールや、エディタの標準、拡張機能で実現できる事も多いですが、複数人で作業を行う場合、無駄な作業やトラブルを避けるために環境を統一する、コーディング規約を遵守するなどかなり面倒です。 そこでよく使われるGulpやWebpackですが、学習コストがかかる上に、Web制作ではそこまでの機能はいらない場合が多いので、比較的入門しやすいと感じたnpm-scriptsでWeb制作向けのタスクランナーを作ってみました。 やりたい事 Web制作の効率化のため、作業の自動化を設定します。 HTML CSS JavaScript
はじめに Hugo のウェブサイトに組み込む RSS リーダーを TypeScript で開発してみたいと思い調査したところ、Hugo の最新版には ESBuild が組み込まれていて、非常に手厚く JavaScript の開発環境がサポートされていることが分かりました。 本記事では紹介していませんが Babel も利用できるようです。 また、NPM パッケージも利用できるため、普段のウェブ開発と同様の流れで開発ができ、各種ライブラリを用いた開発も非常に楽でした。 今回は Hugo で JavaScript 開発する方法を RSS リーダーの開発を例に上げ、そこで得た知見についても交える形で記事として残しておくことにしました。 ちなみに本記事内容は Hugo で JavaScript 開発する方法に焦点を絞ったものなのですが、ウェブサイトに RSS リーダーを組み込むことに焦点を絞って見た
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
npm displays packages with bundled TypeScript declarations
依存関係をキャッシュしてワークフローのスピードを上げる - GitHub Docs
![[スタパ齋藤の「スタパトロニクスMobile」] 大容量のクラウド「BeeStation」の使い勝手が良すぎる!!! Webブラウザでどこからでも簡単にアクセスできる！](https://cdn-ak-scissors.b.st-hatena.com/image/square/1938b68b91b4848e451aa40eaf71a11238611333/height=288;version=1;width=512/https%3A%2F%2Fk-tai.watch.impress.co.jp%2Fimg%2Fktw%2Flist%2F1615%2F430%2Fstptncs2024-08-13%2520thumbnail.jpg)
Webpack 5を使ったvue.jsの環境構築とSFCの利用方法 | アールエフェクト
npm Blog Archive: npm v7 Series - Introduction
JSR Is Not Another Package Manager
npm と yarn と pnpm 比較（2021年4月版） - Qiita
GitHub - antfu/ni: 💡 Use the right package manager
npm install時に「--save」オプションはいらない - Qiita
Moiva.io - Discover and Compare NPM packages
TS Docs | Reference docs for npm packages
rollup.js × TypeScriptのライブラリをnpm公開する環境の構築（2020年12月版）
JSエコシステムぶらり探訪(4): npmとコマンドライン - Qiita
続 LINE 社内用 NPMパッケージの管理戦略
package.jsonのexportsフィールドについて
Publishing Typings to DefinitelyTyped
Why we're excited about the Sigstore general availability
Webブラウザ上でのネイティブなNode.js動作を可能にする「WebContainers」が発表
Introducing npm package provenance
きちんとわかる、npm install | 第1回 PCにコマンドをインストールする
Introducing "safe npm", a Socket npm Wrapper - Socket
npmにも影響があるnode-tarのパストラバーサルの脆弱性 CVE-2021-32804 | yamory Blog
npmgraph - NPM Dependency Diagrams
商用サービス並みに高精度な住所正規化用のNodeモジュールを公開しました！
バンドルサイズに優しい tree shakeable なライブラリを作成する
node_modules のブラックホールとの向き合い方
Web制作向けnpm-scripts - Qiita
Hugo で React + TypeScript を利用してサクッとウェブサイトに RSS リーダーを追加する
www.agrinews.co.jp
nordot.app
www.facebook.com
miwa4.nk.awe.jp
ajin-movie.com
www.yomiuri.co.jp