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 でどのように実現できるのかがあまりよくわかっていなかったので
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
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
TypeScriptでnpmライブラリ開発ことはじめ - Qiita
この記事では、わざわざTypeScriptでnpmライブラリ開発したいという読者を対象としています。 とはいえ今どきはVS Codeさんという素晴らしいエディターのおかげもあって、型が提供されていないnpmライブラリは使いづらい立場にあります。 では早速ですが、TypeScriptで"Hello だれだれ"とコンソールに表示されるnpmライブラリを開発してみましょう。 基本的なnpmライブラリ開発の知識 この記事では「TypeScriptで」npmライブラリ開発することに主眼を置きたいため、基本的なnpmライブラリ開発の知識は「本当にやさしいnpmライブラリ開発入門」くらいは知っている前提で進めます。 package.jsonのあれこれ 私の趣味は人の書いたpackage.jsonを見ることです。（趣味悪いでしょうｗ） ではまずは今回お題にするpackage.jsonを見ていただきましょう
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
