esbuild를 사용하여 React 18/TypeScript 번들 생성
8313 단어 typescriptjavascriptesbuildreact
다음과 같은 기능을 지원합니다.
이 게시물에서는 React 18/TypeScript 프로젝트용 번들을 생성하기 위한 빠르고 간단한 요약을 공유합니다.
프로젝트에 esbuild 설치
mkdir esbuild-demo
cd esbuild-demo
npm init -y
npm install esbuild
그러면 다음이 생성됩니다
package.json.{
"name": "esbuild-demo-story",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"esbuild": "^0.14.48"
}
}
React 18/TypeScript 프로젝트 생성
이제 간단한 React 스크립트를 만듭니다.
react 및 react-dom를 프로젝트 종속성src/App.tsx 파일 생성App 및 Panel 구성 요소 추가App인 div 요소에 root 구성 요소를 마운트합니다.// src/App.tsx
import * as React from 'react'
import ReactDOM from 'react-dom/client';
// App Component
const App = () => (<div>
<h1>Hello, ESBUILD!</h1>
<Panel />
<Panel />
</div>)
// Panel Component
const Panel = () => <h2>I'm a Panel</h2>
// Mount component
const root = ReactDOM.createRoot(
document.getElementById('root')
);
root.render(<App />);
에스빌드 구성
esbuild 구성 파일을 생성하여 프로젝트를 컴파일합니다.React 및 ReactDom 라이브러리도 포함하는
dist 폴더에 (축소된) 번들을 생성합니다(external 속성을 사용하여 제외할 수 있습니다.// esbuild.config.js
const res = require('esbuild').buildSync({
entryPoints: ['src/app.tsx'],
bundle: true,
minify: true,
format: 'cjs',
sourcemap: true,
outfile: 'dist/output.js',
// external: ['react', 'react-dom'],
})
노드를 사용하여 구성 파일을 실행합니다.
node esbuild.config.js
프로젝트 폴더:
Index.html
프로젝트 루트 폴더에
index.html를 만들고 번들을 가져옵니다.<html>
<body>
<script type="module" src="./dist/output.js"></script>
<h1>React</h1>
<div id="root"></div>
</body>
</html>
웹서버를 실행합니다:
npx lite-server
그러면 다음과 같은 결과가 표시됩니다.
간단한 React 18/TypeScript 프로젝트가 작동해야 합니다 :)
SlideShare 프레젠테이션
Reference
이 문제에 관하여(esbuild를 사용하여 React 18/TypeScript 번들 생성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/fabiobiondi/create-a-react-18-typescript-bundle-using-esbuild-4n6o텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
