Bunchee、JS/TS パッケージのバンドラー

Bunchee が t3-env でコア、nextjs、nuxt パッケージをバンドルするために使用されていることがわかりました。

バンチー

Bunchee は、JS/TS ライブラリのバンドルを簡単にするゼロ構成バンドラーです。 Rollup と SWC の上に構築されているため、コードの作成と複数のバンドル (CommonJS または ESModule) の生成に同時に集中できます。

信頼できる唯一の情報源として package.json の標準エクスポート設定を使用し、エントリ ファイルの規則を使用します

エクスポートを照合してバンドルに構築します。

クイックスタート

1. Bunchee を TS プロジェクトにインストールします

以下のコマンドを使用して Bunchee をインストールします:

npm install - save-dev bunchee typescript

2.構成

Bunchee を使用すると、次のコマンドを使用して package.json を自動的に構成できます:

# Use bunchee to prepare package.json configuration
npm exec bunchee - prepare

または、package.json を手動で構成することもできます。以下の構成はドキュメントから抜粋した例です。

{
 "files": ["dist"],
 "exports": {
 "import": {
 "types": "./dist/es/index.d.mts",
 "default": "./dist/es/index.mjs"
 },
 "require": {
 "types": "./dist/cjs/index.d.ts",
 "default": "./dist/cjs/index.js"
 }
 },
 "scripts": {
 "build": "bunchee"
 }
}

3.ビルド

上記の構成ステップでは、ビルド スクリプトを定義しました。このスクリプトを実行するだけです。npm run build、index.ts がバンドラーのエントリ ポイントとなり、exports オブジェクトに基づいて出力を生成します。

例: src/index.ts はエクスポート名「.」と一致します。または唯一のメインエクスポート。

core/package.json でエクスポート

以下のコードは t3-env/packages/core/package.json から抜粋されたものです。

"exports": {
 "./package.json": "./package.json",
 ".": {
 "types": "./dist/index.d.ts",
 "default": "./dist/index.js"
 },
 "./presets": {
 "types": "./dist/presets.d.ts",
 "default": "./dist/presets.js"
 }
},

nextjs/package.json でエクスポート

以下のコードは t3-env/packages/nextjs/package.json から抜粋したものです

"exports": {
 "./package.json": "./package.json",
 ".": {
 "types": "./dist/index.d.ts",
 "default": "./dist/index.js"
 },
 "./presets": {
 "types": "./dist/presets.d.ts",
 "default": "./dist/presets.js"
 }
},

nuxt/package.json でエクスポート

以下のコードは t3-env/packages/nuxt/package.json から抜粋されたものです

"exports": {
 "./package.json": "./package.json",
 ".": {
 "types": "./dist/index.d.ts",
 "default": "./dist/index.js"
 },
 "./presets": {
 "types": "./dist/presets.d.ts",
 "default": "./dist/presets.js"
 }
},

私たちについて:

Thinkthroo では、大規模なオープンソース プロジェクトを研究し、アーキテクチャ ガイドを提供しています。私たちは、tailwind で構築された、プロジェクトで使用できる再利用可能なコンポーネントを開発しました。 Next.js、React、Node 開発サービスを提供します。

プロジェクトについて話し合うためのミーティングを予約してください。

参考:

1. https://www.npmjs.com/package/bunchee

2. https://github.com/t3-oss/t3-env/blob/main/packages/core/package.json#L40

以上がBunchee、JS/TS パッケージのバンドラーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。