반응형
SMALL
// package.json
{
"name": "esbuild-react",
"version": "1.0.0",
"main": "index.js",
"author": "김기원",
"license": "MIT",
"scripts": {
"build": "rm -rf build && node build.js",
"start": "node start.js -w && open http://localhost:3000"
},
"devDependencies": {
"esbuild": "^0.15.8",
"esbuild-plugin-inline-image": "^0.0.8"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}
// build.js
const esbuild = require("esbuild");
const inlineImage = require("esbuild-plugin-inline-image");
esbuild
.build({
entryPoints: ["./src/index.js"],
outdir: "build",
minify: true,
sourcemap: true,
bundle: true,
loader: {
".js": "jsx",
},
plugins: [inlineImage()],
})
.catch(() => process.exit(1));// start.js
const esbuild = require("esbuild");
const inlineImage = require("esbuild-plugin-inline-image");
const PORT = 3000;
esbuild
.serve(
{
servedir: "public",
port: PORT,
},
{
entryPoints: ["./src/index.js"],
outfile: "./public/build/index.js",
bundle: true,
loader: {
".js": "jsx",
},
plugins: [inlineImage()],
}
)
.then(() => console.log(`React with ESBuild Running at ${PORT}`))
.catch((err) => {
console.log(err);
process.exit(1);
});// public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="../build/index.js" async defer></script>
<link rel="stylesheet" href="../build/index.css" />
</head>
<body>
<div id="root"></div>
</body>
</html>// src/index.js
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />);// src/App.jsx
import React from "react";
const App = () => {
const getRandomWelcomText = () => {
const welcomeTexts = ["Hello World", "Welcome", "Hi esbuild"];
return welcomeTexts[Math.ceil(Math.random() * 10) % welcomeTexts.length];
};
return (
<div>
<h1>fjdisoafjdsio</h1>
<h1>fjdisoafjdsio</h1>
<h1>fjdisoafjdsio</h1>
<h1>fjdisoafjdsio</h1>
<h1>{getRandomWelcomText()}</h1>
</div>
);
};
export default App;
소스코드: https://github.com/milliwonkim/react-no-cra-esbuild
반응형
LIST
'React' 카테고리의 다른 글
| 리액트에 멀티스레드(Multi-Thread) 도입하기(feat. worker-plugin) (0) | 2022.09.22 |
|---|---|
| [리액트 개념] React의 Virtual DOM(가상돔)이란? (0) | 2022.09.20 |
| Jenkins + Github 연동 방법 (1) | 2022.09.19 |
| React + Docker를 이용해서 React를 실행하기 (Feat. NginX) (0) | 2022.09.19 |
| React + Express(Node) + JWT를 이용한 로그인, 회원가입 구현하기 (0) | 2022.09.12 |