JS/TS 패키지 번들러 Bunchee

Bunchee가 t3-env에서 핵심, nextjs, nuxt 패키지를 번들로 묶는 데 사용되는 것을 발견했습니다.

번치

Bunchee는 구성이 필요 없는 번들러로 JS/TS 라이브러리를 손쉽게 번들링할 수 있습니다. Rollup 및 SWC를 기반으로 구축되어 코드 작성과 동시에 여러 번들(CommonJS 또는 ESModule) 생성에 집중할 수 있습니다.

package.json의 표준 내보내기 구성을 유일한 정보 소스로 사용하고 항목 파일 규칙을 사용합니다

내보내기를 일치시키고 번들로 구성합니다.

빠른 시작

1. TS 프로젝트에 Bunchee 설치

아래 명령을 사용하여 Bungee를 설치합니다.

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가 번들러의 진입점이 되고 내보내기 개체를 기반으로 출력을 생성합니다.

예: 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

위 내용은 JS/TS 패키지 번들러 Bunchee의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!