React、TypeScript、CSS モジュールを使用した効率的な npm パッケージの構築: 包括的なガイド

再利用可能な npm パッケージを作成すると、開発プロセスがより効率的で楽しいものになります。この記事では、React、TypeScript、CSS モジュール、その他のツールを使用して、最新で堅牢なプロジェクト セットアップを作成する方法を説明します。

始める前に、ここでソースコードを見つけることができます。 https://github.com/helgastogova/npm-react-typescript-template 。このリポジトリは、React と TypeScript を使用して npm パッケージを作成するためのベースとして機能します。最新の開発ワークフローに合わせて、ビルド プロセスと推奨パッケージのセットが事前に構成されています。

主な機能は次のとおりです。

1. React と TypeScript : 強力なタイプ セーフティと優れた開発者エクスペリエンスを備えた最新の UI 開発。
2. CSS モジュール: コンポーネントを個別にスタイリングし、CSS の競合を回避し、モジュール設計を可能にします。
3. ESLint : JavaScript と React のベスト プラクティスに準拠してコードの品質を確保します。
4. Rollup : React と TypeScript コードを配布用に 1 つのファイルに効率的にバンドルします。
5. PostCSS : 次世代 CSS 機能を利用し、ブラウザーの互換性を処理します。
6. サイズ制限: ライブラリのサイズを監視し、偶発的なサイズの肥大化を防ぎます。

各ツールをより包括的に見てみましょう。

CSSモジュール

CSS モジュールは、スタイリングの混乱の領域における安全の標識として機能します。これらはスタイルのローカル スコープを実装し、競合や重複の問題を回避します。各 CSS モジュールはコンポーネントに「カプセル化」され、定義したスタイルが外部に漏れて意図せず他の要素に影響を与えることがなくなります。

CSS モジュールを使用する次の単純なコンポーネントを考えてみましょう。

 // TestComponent.tsx import React from 'react'; import s from './TestComponent.module.css'; type TestComponentProps = { text?: string; }; export const TestComponent: React.FC<TestComponentProps> = ({ text }) => { return <div className={s.root}>{text ?? 'Hello!'}</div>; };

およびそれに関連する CSS モジュール:

 /* TestComponent.module.css */ .root { background-color: pink; padding: 20px; border-radius: 8px; }

この場合、 TestComponent.module.cssの.rootクラスは、別のモジュール内の他の.rootクラスに影響を与えません。

ESLint

ESLint は、騒々しいコードの海を案内する灯台のようなものです。コードの品質を維持し、問題が発生する前にエラーを検出し、ベスト コーディング プラクティスを適用するのに役立ちます。

package.jsonには次のものがあります。

 "scripts": { "lint": "eslint './src/**/*.{ts,tsx}'" }

npm run lintを使用してリンターを実行します。 ESLint は TypeScript ファイルをスキャンし、潜在的な問題について警告します。これは、小さなエラーや不整合が入り込みやすい大規模なコードベースの場合に特に便利です。

巻き上げる

Rollupはコードのパーソナル フィットネス トレーナーです。これは、JavaScript、TypeScript、CSS を取得して、配布可能な 1 つの無駄のない効率的なパッケージにバンドルします。

軽量で高速ですが、本当のメリットは「ツリーシェイキング」機能から得られます。ロールアップを使用すると、最終的なバンドルから未使用のコードを削除し、パッケージを可能な限り無駄のないものにすることができます。ロールアップ構成の例を次に示します。

 // rollup.config.js const postcss = require('rollup-plugin-postcss'); const typescript = require('@rollup/plugin-typescript'); const peerDepsExternal = require('rollup-plugin-peer-deps-external'); const resolve = require('@rollup/plugin-node-resolve').default; const commonjs = require('@rollup/plugin-commonjs'); module.exports = { input: 'src/index.tsx', output: { dir: 'dist', format: 'cjs', sourcemap: true, }, plugins: [ peerDepsExternal(), resolve(), typescript(), commonjs(), postcss({ modules: true, }), ], };

PostCSS

PostCSSはタイムトラベラーのようなもので、将来の構文と機能を使用して CSS を作成できます。その後、(いわば) 過去に戻り、これらの最新のスタイルを古いブラウザでも理解できるコードに変換します。

上記のロールアップ構成で PostCSS が動作しているのを確認できます。 rollup-plugin-postcssを使用すると、最新の CSS が変換され、最終的なバンドルに組み込まれます。この利点は、ブラウザーの互換性を気にせずに、最新の機能を使用して CSS を作成できることです。

サイズ制限

サイズ制限は、ライブラリが肥大化しないように常に警戒する監視員です。ユーザーがダウンロードする JavaScript と CSS の両方を追加することで、ライブラリの実際のコストが計算されます。これは、バンドルのサイズを抑えるのに役立つ貴重なツールです。

package.json内:

 "scripts": { "size": "size-limit", }, "size-limit": [ { "path": "dist/*.js", "limit": "10 KB" } ]

その後、 npm run sizeを実行してバンドルのサイズを確認できます。設定した制限 (この場合は 10 KB) を超えると、スクリプトはエラーをスローします。これは、ユーザーのダウンロード時間を無意識のうちに増加させないようにするための優れた方法です。

設定

このテンプレートの使用を開始するには、リポジトリのクローンを作成します。

 git clone https://github.com/helgastogova/npm-react-typescript-template.git

次のディレクトリに移動します。

 cd npm-react-typescript-template

依存関係をインストールします。

 npm install

これでパッケージの開発を開始する準備が整いました。エントリポイントはsrc/index.tsxです。

パッケージの構築

独自のコンポーネントを作成した後、配布用のパッケージをビルドする準備ができたら、次を実行します。

 npm run build

ビルドしたパッケージはdistディレクトリに配置され、npm に公開できるようになります。

npm に公開する

package.jsonのnameフィールドを目的のパッケージ名に設定していることを確認してください。また、新しく公開する前に必ずバージョン番号を更新してください。それが完了したら、次のコマンドを使用して npm にログインします。

 npm login

ユーザー名、パスワード、電子メールを入力します。ログインしたら、次のコマンドを使用してパッケージを公開できます。

 npm publish

これで、コンポーネントをnpmjs ライブラリに公開したので、ユーザーはそれを使い始めることができます。あなたは素晴らしいです！

コーディングを楽しんでください!