再利用可能な npm パッケージを作成すると、開発プロセスがより効率的で楽しいものになります。この記事では、React、TypeScript、CSS モジュール、その他のツールを使用して、最新で堅牢なプロジェクト セットアップを作成する方法を説明します。 始める前に、ここでソースコードを見つけることができます。 。このリポジトリは、React と TypeScript を使用して npm パッケージを作成するためのベースとして機能します。最新の開発ワークフローに合わせて、ビルド プロセスと推奨パッケージのセットが事前に構成されています。 https://github.com/helgastogova/npm-react-typescript-template 主な機能は次のとおりです。 : 強力なタイプ セーフティと優れた開発者エクスペリエンスを備えた最新の UI 開発。 React と TypeScript : コンポーネントを個別にスタイリングし、CSS の競合を回避し、モジュール設計を可能にします。 CSS モジュール : JavaScript と React のベスト プラクティスに準拠してコードの品質を確保します。 ESLint : React と TypeScript コードを配布用に 1 つのファイルに効率的にバンドルします。 Rollup : 次世代 CSS 機能を利用し、ブラウザーの互換性を処理します。 PostCSS : ライブラリのサイズを監視し、偶発的なサイズの肥大化を防ぎます。 サイズ制限 各ツールをより包括的に見てみましょう。 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}'" } を使用してリンターを実行します。 ESLint は TypeScript ファイルをスキャンし、潜在的な問題について警告します。これは、小さなエラーや不整合が入り込みやすい大規模なコードベースの場合に特に便利です。 npm run lint 巻き上げる はコードのパーソナル フィットネス トレーナーです。これは、JavaScript、TypeScript、CSS を取得して、配布可能な 1 つの無駄のない効率的なパッケージにバンドルします。 Rollup 軽量で高速ですが、本当のメリットは「ツリーシェイキング」機能から得られます。ロールアップを使用すると、最終的なバンドルから未使用のコードを削除し、パッケージを可能な限り無駄のないものにすることができます。ロールアップ構成の例を次に示します。 // 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 はタイムトラベラーのようなもので、将来の構文と機能を使用して CSS を作成できます。その後、(いわば) 過去に戻り、これらの最新のスタイルを古いブラウザでも理解できるコードに変換します。 PostCSS 上記のロールアップ構成で PostCSS が動作しているのを確認できます。 を使用すると、最新の CSS が変換され、最終的なバンドルに組み込まれます。この利点は、ブラウザーの互換性を気にせずに、最新の機能を使用して CSS を作成できることです。 rollup-plugin-postcss サイズ制限 、ライブラリが肥大化しないように常に警戒する監視員です。ユーザーがダウンロードする JavaScript と CSS の両方を追加することで、ライブラリの実際のコストが計算されます。これは、バンドルのサイズを抑えるのに役立つ貴重なツールです。 サイズ制限は 内: package.json "scripts": { "size": "size-limit", }, "size-limit": [ { "path": "dist/*.js", "limit": "10 KB" } ] その後、 を実行してバンドルのサイズを確認できます。設定した制限 (この場合は 10 KB) を超えると、スクリプトはエラーをスローします。これは、ユーザーのダウンロード時間を無意識のうちに増加させないようにするための優れた方法です。 npm run size 設定 このテンプレートの使用を開始するには、リポジトリのクローンを作成します。 git clone https://github.com/helgastogova/npm-react-typescript-template.git 次のディレクトリに移動します。 cd npm-react-typescript-template 依存関係をインストールします。 npm install これでパッケージの開発を開始する準備が整いました。エントリポイントは です。 src/index.tsx パッケージの構築 独自のコンポーネントを作成した後、配布用のパッケージをビルドする準備ができたら、次を実行します。 npm run build ビルドしたパッケージは ディレクトリに配置され、npm に公開できるようになります。 dist npm に公開する の フィールドを目的のパッケージ名に設定していることを確認してください。また、新しく公開する前に必ずバージョン番号を更新してください。それが完了したら、次のコマンドを使用して npm にログインします。 package.json name npm login ユーザー名、パスワード、電子メールを入力します。ログインしたら、次のコマンドを使用してパッケージを公開できます。 npm publish これで、コンポーネントを に公開したので、ユーザーはそれを使い始めることができます。あなたは素晴らしいです！ npmjs ライブラリ コーディングを楽しんでください!
