CRA 없이 ESBuild를 이용한 리액트 Boilerplate 만들기
// 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;