Typescript+ESMでnpmパッケージ開発した備忘録
Typescript+ESMでnpmパッケージを作る方法が案外まとまってなかったので残しておく。マサカリ歓迎。ほぼ確実に間違い/非効率な点がある。jestでテストもやってる。基本yarnを使う。 モジュール化するときにCommonJS(requireのやつ)とESM(import/exportのやつ)とかがある。調べたところESMが業界標準で、nodejs>13.2.0とか モダンな ブラウザではすでに対応してるらしいので、ESMで行く。Tree Shakeがしやすかったりするらしい。 プロジェクトの初期化 YOUR_PACKAGE_NAME="<名前>" mkdir $YOUR_PACKAGE_NAME && cd $YOUR_PACKAGE_NAME yarn init -y
複数のモジュール形式(CommonJS, ES Modules, UMD)をサポートしたnpmパッケージの作り方 in TypeScript - dackdive's blog
はじめに npmパッケージを開発するとき、パッケージ利用者の実行環境に合わせて適切なモジュール形式のファイルをパッケージに含め、提供する必要があります。 具体的には、たとえば以下のようなバリエーションが考えられます。 Node.js環境であれば CommonJS 形式 (module.exports / require() ) ブラウザ環境で、webpackやRollupなどのモジュールバンドラーを前提とするならば CommonJS や ES Modules 形式 (export / import ) ブラウザ環境で、モジュールバンドラーなどは使わず<script>タグでファイルを読み込んで利用するならば UMD 形式 このとき、パッケージ提供側はどういったファイルをパッケージに含めるべきなのか、またそれを TypeScript でどのように実現できるのかがあまりよくわかっていなかったので
npmモジュールをtgzに固めてインストールする - Qiita
npm packというサブコマンドがあるので、それを使うとモジュールをtgzにまとめる事が出来る。（いつの間にこんなサブコマンド出来てたんだ……） $ npm pack grunt npm http GET https://registry.npmjs.org/grunt npm http 304 https://registry.npmjs.org/grunt grunt-0.4.4.tgz $ npm install ./grunt-0.4.4.tgz npm packに適当なモジュール名を渡してあげると、 依存モジュールと一緒にダウンロードしてきてくれて、そのままtgzに固めてくれる。tgz展開したら依存モジュール付いてこなかった…… なのであとはnpm installでtgzを指定してあげればお気楽簡単インストール。 どこか近いサーバにこんな感じでtgzを落としておいて、packa
npm link で OSS 活動の効率を上げる - 30歳からのプログラミング
npm にはlinkというコマンドが用意されており、これを使うことで npm パッケージの開発効率が上がる。 既存のパッケージに手を加えた際の動作確認にも使えるので、OSS 活動の効率も上がる。 この記事では、npm linkの仕組みと、それをどのように利用できるのかについて説明する。 動作確認に使った npm のバージョンは6.14.5。 Node.js のバージョンは12.17.0。これ以前のバージョンだと以下の動作確認でエラーが出るので注意。 サンプル用のパッケージとアプリを作る まずはパッケージを作成する。 my-package-dirというディレクトリを作り、そこに以下の内容のpackage.jsonを作成する。 { "name": "my-package", "type": "module", "main": "main.js" } そして、以下の内容のmain.jsを作る。
npm publishする時の注意点 - Qiita
npm(nodejsのパッケージマネージャー)には簡単に自作のモジュールをuploadできます。 初めてのnpm パッケージ公開 - Qiita こちらの記事で初回アップロードの手順は詳細に書いてあります。 初回はもちろん、バージョンアップして２回目以降のnpm publishをする時の注意点を記しておきます。 手順 test READMEの確認 TODOの確認 ソースコードのbuild GitHubにpushしてCI(travis等)のtest npm versionの更新 npm publish test とにかくtest通ってなければ話になりません。npm run test READMEの確認 コードをガシガシ書いてテストが通ったら満足してしまいがちですが、公開するならREADMEに新機能の説明を追加するのを忘れてはいけません。 TODOの確認 私は開発中に思いついた機能、メソッド名
ncc - nodeプロジェクトを一つのファイルにまとめる
nodeではnpmを使ってライブラリをインストールしてプログラミングを行います。そして配布する際にはnode_modulesを除き、各自がインストールします。しかしネットワークが必要だったり、場合によってはライブラリのインストールに失敗するかも知れません。 そこで使ってみたいのがnccです。コードを一つにまとめてポータブルにしてくれるソフトウェアです。 nccの使い方 コード例です。 const chalk = require("chalk"); console.log(chalk.blue.bgRed.bold("Hello world!")); ビルドを使うとコードが生成されます。 $ ncc build ncc: Version 0.20.4 ncc: Compiling file index.js 44kB dist/index.js 44kB [439ms] - ncc 0.20
かゆいところに手が届く！patch-packageでnpmパッケージを乗りこなそう - bagelee（ベーグリー）
はじめに npmパッケージを利用する際、バージョンの違いなどで動かなかったり、少しだけカスタマイズしたいといったような場面に遭遇することはないでしょうか？そんなときに使える patch-package というツールをご紹介します。 npmパッケージを修正するには npm install によって追加されたパッケージはプロジェクトのnode_modulesというディレクトリ内に保存されます。 このnode_modules内のファイルを変更してしまえばnpmパッケージを修正できるのですが、いくつか方法があります。 node_modules内を直接修正する方法 node_modules内のファイルは一般的にはJavaScriptですので、そのファイルを直接変更してしまうことが可能です。 しかし、node_modules内のファイルは npm install 時などに上書きされる可能性がありますし
npm linkの基本的な使い方まとめ - Qiita
はじめに 仕事でnpm link機能をいろいろ試しながら導入したので備忘録も兼ねつつ、まとめます。 リンクを貼る 基本的には公式ドキュメントにあるとおりですが、実際に試した結果としてまとめます。 想定としては、 「use-npm-link-Aから、まだnpmに公開していないuse-npm-link-Bとuse-npm-link-Cにリンクを貼って動作を調べたい」 といった感じです。実際にリンクを貼った状態が以下の図です。 リンクしたいuse-npm-link-Bとuse-npm-link-Cは以下の図のようになっています。 ディレクトリ名 -> use-npm-link-B package.jsonのnameで指定された名前 -> use-npm-link-B ディレクトリ名 -> UseNpmLinkC package.jsonのnameで指定された名前 -> use-npm-link-
[フロントエンド] npm linkを使って、効率的にnpmモジュールを開発する - YoheiM .NET
こんにちは、@yoheiMuneです。 npm linkというコマンドがあるんですね、初めて知りました。npmモジュール開発が効率的にできたので、ブログにも用途や使い方をまとめておきたいと思います。 目次 npm linkとは npm linkはシンボリックリンクを貼る仕組みで、開発中のnpmモジュールと、それを組み込むアプリケーションとをつなぎ合わせることができる仕組みです。 ここでは、開発中のモジュールをmymodule、それを組み込むアプリをmyappとして、以下のディレクトリ構成だとします。 + ~/git/ - mymodule/ <--- 開発中のモジュール - myapp/ <--- 開発中のアプリ - node_modules/ - mymodule/ (※2) <--- 開発中のモジュールに依存している 通常であればmyappからmymoduleを使う場合には、npm i
![[フロントエンド] npm linkを使って、効率的にnpmモジュールを開発する - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/0c74a1b2b2ec93b71d774e79621839164b1e38fa/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F538.jpg)
TypeScriptでCLIツールを作って、npmパッケージにする
環境 node 9.4.0 TypeScript 2.9.2 npm 6.1.0 webpack 4.16.3 Visual Studio Code 1.25.1 予めtj/n: Node version management等を使って、Node.jsをインストールしておきましょう。 実践 適当な名前でプロジェクトディレクトリを作っておきます。ココではts-sampleとします。 $ mkdir ts-sample $ cd ts-sample/ $ git init $ curl https://raw.githubusercontent.com/github/gitignore/master/Node.gitignore > .gitignore
npm ciを使おう あるいはより速く - Qiita
人類はより高速にCIを回していくべきだと思っている りんご（@mstssk）です。 先日、 npm の v5.7がリリースされ npm ci というサブコマンドが新たに追加されました。 The npm Blog — Introducing npm ci for faster, more reliable... http://blog.npmjs.org/post/171556855892/introducing-npm-ci-for-faster-more-reliable CI/CDを開発プロセスに組み込んでいる場合により整合性があり高速なエクスペリエンスを提供する、と公式ブログでは紹介しています。 npm ci は何をするのか npm ci を実行すると常に package-lock.json から依存関係をインストールします。 既に node_modules フォルダの中身があっても
npm リポジトリを verdaccio で構築する / 桃缶食べたい。
npm リポジトリを verdaccio で構築する 前回 npm パッケージを作ってみましたが、npm でパッケージを作っていくとそれをリポジトリに公開したくなってきます。NodeJs には https://www.npmjs.com/ という公式リポジトリが存在しますが、一般公開したくない npm モジュールを置きたいとか、npm リポジトリ自体も自分で構築したいという要望もあるでしょう。 自前の npm リポジトリサーバーはいくつか存在するのですが、今回は構築の簡単な verdaccio を使ってみようと思います。 verdaccio をインストールするnpm リポジトリ用のサーバーにログインし、verdaccio をインストールします。 npm モジュールとして提供されているので、npm コマンドでインストールできます。# npm install --global verdacci
Verdaccioを使って簡単local npm registryを構築する - Qiita
ローカルにnpm registryを構築する方法はいくつかありますが、結構有名らしいVerdaccioを使って構築するための備忘録 ブログとかQiitaにも記事はあるんだけど肝心な設定が抜けていたりしていたのでその辺も載せておきます 目次 構築環境 必要なパッケージのインストール npmのインストール verdaccioのインストール verdaccioの設定 標準のサービスファイルをsystemdにコピーする コピーしたサービスファイルを修正する 一旦verdaccioを起動させる configファイルを修正する local registryのproxyを追加 npm package問い合わせをlocal優先にする 外部アクセスを受け付けるにはこれが必須 verdaccioをサービスに登録する 起動と自動起動の設定 動作確認 registryを追加する パッケージ毎に分けたい場合 グロー
npm の prepublish と prepare の変遷 - Qiita
発端 npm@5 になるときに、 prepublish の挙動が大きく変更されました。 Node.js の 8.x が LTS になった当時、Node.js@6 は npm@3 でしたが、Node.js@8 では npm@5 になるため、 その内容をちゃんと把握できていなかったので、調べました。 作業して結果をまとめたリポジトリがあるので、それの日本語訳+アルファ を書きます。 "ステップ4" と "ステップ 5" とはなにか まとめを読むのに必要な用語（？）なので、先に説明しておきます。 https://github.com/npm/npm/issues/10074 で言ってるやつです。 ステップ 4 は、 In a year or so, make a semver-major bump to npm and make prepublish's behavior match prepu
TypeScriptでnpmライブラリ開発ことはじめ - Qiita
この記事では、わざわざTypeScriptでnpmライブラリ開発したいという読者を対象としています。 とはいえ今どきはVS Codeさんという素晴らしいエディターのおかげもあって、型が提供されていないnpmライブラリは使いづらい立場にあります。 では早速ですが、TypeScriptで"Hello だれだれ"とコンソールに表示されるnpmライブラリを開発してみましょう。 基本的なnpmライブラリ開発の知識 この記事では「TypeScriptで」npmライブラリ開発することに主眼を置きたいため、基本的なnpmライブラリ開発の知識は「本当にやさしいnpmライブラリ開発入門」くらいは知っている前提で進めます。 package.jsonのあれこれ 私の趣味は人の書いたpackage.jsonを見ることです。（趣味悪いでしょうｗ） ではまずは今回お題にするpackage.jsonを見ていただきましょう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Configure and use npm with CodeArtifact - CodeArtifact
npm registry urlコマンド - Qiita
npm pack でnpmパッケージを圧縮する - Qiita
自作CLIを作成する - Qiita
「npm install」がpackage-lock.jsonを書き換えるのはなぜですか？