??? ?? ??? ??? ??? ????? ?? ? ? ?? Webpack, Babel, Rollup, Parcel, Create-React-App? ???? ??? ?? ??? ?? ? ??? ? ???? ?? ????.

? ??? ??? ??? ??? ??? ????? ???? ???? ?? ????? ?? ??? ??? ??? ??? ??? ????. ????? ???? ??? ??? ?? ??? ?????. ??? ??? ??????.

??

1. ? ??? ?? ?? ??? ??? ??????
2. ?? ??? ??? ??? ??
3. ??
4. ??? ??
5. Esbuild
6. ??? ?
7. vite
8. WMR
9. ?? ??
10. ???

?????, ?? ??? ????, ????? ?, ? ????, ??? ?? ??? ???? ????. ?? ??? ?? ??? ?? ???? ?? ?? ????. ?? ????,? ???? ??????? ?? ?? ???? ????. ??? Snowpack? Vite? ??? ?? ??? ?? ?? ???? Esbuild? ????? . ??? ??? ????? ?? ?????? ?? ??? ???? ??? ??? ??? ? ? ? ? ??? ????. ?? ???, ??? ?? ??? ????, ??? ????? ? ? ???? ??? ? ??? ??? ? ? ????.

??,? ?? ?? React and Preact? ??? ?? ??? ?? ?? ? ????. ? ??? ?? ?????? ? ????? ?? ??? ?? ??? ??? ?? ??? ?? ?????.

? ??? ??? ??? ?? ??? ??, ??? ? ? ???? ???????. ? ?? ???? ?? ? ShopTalk ? ????? ? ? ????. ???? 454? Vite? Episode 448? WMR? Snowpack? ???? ???????. ? ?????? ?? ?? ?? ??? ??? ????? ?? ??? ??? ???? ? ??? ?? ??? ?????? ????.

? ??? ?? ?? ??? ??? ??????

?????, ??? ??? JavaScript ?? ??? ?? ???? ???? ??? ?????.? ???? 2016 ?? JavaScript ??? ??? ????? ? ?? ? ????. ?? ?? ??? JavaScript ??? ???? ??? ?? ??? ???? ?? 200 ?? ?? ???? ?? ???? ???? ???? ?? ??? ? ???. ??? ??? ???? ???? ???? JavaScript ????? ?? ??? ??? ?????.

Snowpack, Vite ? WMR? ?? ????? ?? JavaScript ??? ?? ????????. 2018 ?? Firefox 60? ????? ECMAScript 2015 ??? ???????. ? ??? ?? ?? ???? ??? ?? JavaScript ??? ??????. Node.js? ?? 2019 ? 11 ?? ?? JavaScript ??? ??????. ??? ??? 2021 ?? Native JavaScript ??? ???? ?? ????.

?? ??? ??? ??? ??

?? ??? WebPack, Rollup ?? Parcel? ????, ??? ?? ?? ? Node_Modules ???? ?? ?????? ??? ???? Babel, TypeScript ?? PostCSS? ?? ?? ????? ?? ??? ?? ? ?? ?? ??? ????? ?????. ? ?? ?? ??? ???? ?? ? ???? ??? ?? ?? ??? ? ? ??????? ?? ??? ??? ? ? ????.

Snowpack, Vite ? WMR ?? ???? ??? ??? ????. ?? ????? ?? ?? ???? ?? ??? ?? HTTP ??? ? ??? ?????. ? ??? ???? ?? ? ????? ?? ? ??? ??? ?? ?? ??? ?? ??? ?? ? ?? ????? ?????. Dev ??? ?? ??? ???? ??? ?? ??? ?? ??? ?????.

? ???? Esbuild? ?? ? ?? ? ? ????. ???? ?? ?? ?? ???. ?? ??? ??? ?? ?? ???? ????. ??, Esbuild? ?? ??? ??? ???? ???? GO ??? ???? ?? ??? ??? ???????.

??

React Docs?? ?? ? ? ??? ?? ??? ???? ??? ? ??? ?? ???????. ?? ? ????? Yogita Verma? ?? ??????. ??? ?? Repo? ?? ??? ?? ?? ?? ??? ???? 4 ?? ??? Snap Shot? ?? ? ???? ?????. ??? ? ?? ??? ??? ?????. ? ?? ????? ???? React ??? ? Axios? ??? ??? ? ?? ?? ???? ?? ?? ??? ??? ??? ? ??????.

??? ??

? ?? ??? ?? ??? ???? ?? ?? ???? ?? ??? ????? (??? ??).

• ?? JavaScript ??? ?? ?? ??
• TypeScript ??? (?? ??? ??)
• JSX
• ?? ???? ???? API
• ?? ?? ??
• CSS ?? ? CSS-in-JS ????? ??

??? ?? ??? TypeScript? JavaScript? ??? ? ? ??? ?? ??? ???? ??????. ??? ?? ??? ???? root javaScript ??? TypeScript? ???? TSC -NOEMIT? ????? ??? ????? ???? ?? ??? ???????.

?, ? ??? ?? ?????.

Esbuild

Esbuild? Evan Wallace (Figma? CTO)? ?? ???????. ?? ??? ?? ?? ??? (?? ?? ??)?? ?? ?? 10 × -100 × ? ?? ??? ????? ????. Create-React-App? ?? ??? ???? ?? ???? ????. ??? Create-React-App-esbuild, Estrella ? Snowpack? ???? ??? ??? ??? ?? ? ?? Esbuild ???? ???? ??? ?? ??? Esbuild? ?????.

Esbuild? ?? ?????. ?? 1.0 ??? ???? ???? ?? ?? ????? ???? ?? ?????. ??? ? JavaScript ? ?? ? API? ??? ????? ?????.

?? ??

Esbuild? Bundler World? ??? ?? ??????. Esbuild? Node Bundlers? ?? ??? ??? ?? ??????? ?? ?? ? ????. Esbuild? 1.0? ?? ? ?? ?? ????? ?? ?? ? ??? ??? ????? ???? ??? ?? ??? ?? ? ????. ????, ?? ?? ??? Esbuild? ?? ? ??? ???????. ? ?? ?? ?????? ???? ??? ??? ?? ????.

Esbuild? ?? ?? ??? ??????? ?? ?? ?? ???? ? ????. ??? ????? ???? ? ???? ??? ????? ?? ??? ??? ?? ????! ?? ?? ?? ?? ????? ??? ????? ?? Esbuild?? ?? ???? ???? ?? ?? ????. ??? ??? JavaScript ????? ???? ??? ?? ?? ???? ?? ?? ??? ???? ? ??? ???????. ?? ??? ??? ??? ?????? ?? ? ??? ???? ?? ? ?? ?? ??? ?? ? ? ????.

??

?? Esbuild?? Esbuild, React ? Reactdom? ???? NPM? ??? ???? Esbuild?? React ????? ????? ??????. src/app.jsx ??? dist/index.html ??? ??????. ?? ?? ?? ??? ???? ?? dist/bldle.js ??? ???????.

 ./node_modules/.bin/esbuild src/app.jsx-bundle-platform = ???? -outfile = dist/bundle.js

?????? index.html? ????? ??? ?, ?? "?? ?? ???"? "uppher ?? ?? : ????? ???? ??"?? ??? ?????. ??? CLI? ???? ???? ???? ??? ?? ???? ????? ?????? ??? "gotcha"? ? ????. ???? ???? ?? ? ? ?? ??? ???? ?????.

 -define : process.env.node_env = \ "Production \"

?? ???? ??? ?? ?? ?? ??? NPM ????? Esbuild? ???? ?? :

 -define : process.env.node_env = \\\ "Production \\\"

? ?? ??? ?? ?? ??? ???? ????? ?? ??? ???? ?????? ?????. Vue 2.0? ??? ?????. ????? ????? ?? ?? ??? ??? ???? ?? ??? Preact? ??? ??? ????.

?? ??? ??? ?? ? ?, ??“Hello World”React App? ???? ??????. JSX? .jsx ??? ???? ?? ??? ?????. ?, RECT? ???? ?????? JSX? React.createElement? ?????. ??? JSX?? ?? ?? ?? ?/?? prect? ?? JSX? ???? ??? ????.

??

Esbuild? ?? ????? -??? ??? ?????. ??? ?? ???? ???? ????? ?? ??? ???? ????? ?? ??? ??? ?? ?? ??????. ??? Live/Hot Reloading? ???? ???? ?? ? ????? ?? ?? ? ??? ???? ??? ????.

?? ?? ? ?? ??? ????? ????? ?? ??? ?? ? ??? Esbuild?? ??? ? ?????? ?????. ??? ??? ?? ??? ????? ??? ??? ?????. Luke Jackson? ??? ?? ?? ?? ???? ??? ? ????.

 NPM ?? ??-?? ??

?? ?? Esbuild JavaScript API? ???? ??? ???? ??? Esbuild? ?? ??? ??? ? ????. ????? ???? watch.js?? ??? ??? ???.

 // watch.js
const esbuild = require ( "esbuild");
const servor = ?? ?? ( "??");

esbuild.build ({
  // ??? ???? ???? esbuild ...
  EntryPoints : [ "src/app.jsx"],
  Outdir : "Dist",
  ?? : { "process.env.node_env": ' "Production"'},
  ?? : ??,
});

??? ?? serv () {
  Console.log ( "?? ?? : http : // localhost : 8080/");
  ??? ???? ???? ({
    // ???? ??? ???? ????? ...
    ???? : ??,
    ?? : "dist",
    ?? : 8080,
  });
}

????();

?? ?? ??? Node Watch.js? ??????. ??? ???? ?? Dev ??? ????? ??? ? ?? ?? ?? ?? ?? ??? ???? ???? (? : ????? ? ??? ???? ??). ??? ??? ? ??? ??? ??????.

??? ??? ??? ?? ?? ????? ??????? Esbuild? ???? ?? ? ? ?? ????? ?????. ? ??? ?? ? ? ?? ?????? ???? ???? ???????. ? ???? 2012 ??? ?? i7? ????? ??? ??? ??? ????.

Live Reload? ?? React ???? ?? ?? ??? Esbuild ??? ??? ??? ???? ?? ? ? ????.

???? ??

Esbuild? ??? ? ?? JavaScript? CSS? ??? ? ????. ?? ?? JavaScript ??? ??? ??? ?? ??? CSS? ??????. ?? ????? CSS @import ?? ??? ?? ?? ????. CSS ??? ?? ??? ??? ??? ????.

Esbuild ? ???? ????? ?? ??? ????. ?? ?? VUE ?? ?? ?? ?? ? Svelte ?? ??? ??? ??? ????? ????.

Esbuild? JSON ??? ?? ???? ???? JavaScript ??? ?? ? ????.

?? ??? URL? ????? ?? ??? ???? ???? JavaScript? ???? ??? ?? ????. ? ??? ????? ????? ??? Esbuild ?? ??? ??? ???? ? ?? ? ??? ??? ? ? ????.

 ?? : { '.png': 'dataurl'} // JS ??? ??? URL? ??
?? : { '.png': 'file'} // ?? ??? ?????.

?? ??? ???? ?? ? ??? ???? ??? ESM ?? ???? ???? ??? ????? ?? ?? ? ??? ????. ?? ?? ???? ????? Esbuild? ???? ??? ?? ? ????.

?? ??

Esbuild ???? "Minify"? "Bundle"??? ???? ??/Terser ??? ???? ?? ??? ???? ????. Esbuild? ??? ? ?? ??? ??? ???? ?? ?? ?? ?? ???? ???? ?????. ??? ??? ??? ??? ? ??? ????? ?? ??? ??? ??? ?? ??? ????. Snap Shot Application? ???? Esbuild? ??? Terser? ???? Vite? ?? ? 165KB?? ?? ?? 177kb? ??? ??????.

????

Esbuild? ?? ??? ?????. ??? ?? ??? ????? ??? ? ????. ? ??? ?? Esbuild? ???? ?? ?? ? Snowpack? ??????.

??? ?

Snowpack? Skypack? Pika? ???? ?? ?????. ??? ?? ?? ??? ????“undundled development”???? ???????. ??? ????? ??? ?? ????.

????? Snowpack? ?? ??? ??? ?? ???? ????? ??? ?????? ???? Unbundled esmodules? ?????. Esbuild? ??? ??? ????? ???? ??? ????? JavaScript ??? ???? ??? ? Esbuild? ?? ?? ? ???? ????.

Snowpack?? JavaScript ??? ??? ?? ?????? ??? ??? ?? ???? ???? ?? ???? ??? ????. ??? ? ??? ??? ???? ????? React??? ?? ?? ?? ???? ???? ?????. ?? Snowpack? Svelte? ?? ???? ???? ??? ????. ?? ??? Svelte Summit 2020?? Rich Harris?“Futuristic Web Development”??? Snowpack? ?? ?? ?????. ?, ???? Svelte Meta-Framework Sveltekit? Snowpack? ?? ???????? ?? Vite? ??????? (??? ?? ? ????).

?? ??

Unbundled Deployment? ? ?? ???? Snowpack? ?? ?????. ??? ??? ?? ??? ?????? ? ????. ??? ??? undundled ??? ? ?? ??? ??? ???? ?? ?????. ???? ?? ???? ?? ??? ???? ??? Snowpack? ??? ?????. ??? ?? ??? ??? ?? ??? ?? ?? ??????? ????? ???? ?? ????. ?? ????? ??? ? ?? ??? ?? ??? ??? ??? ??? ?? ??? ??? ??? ?? ? ????.

??, Snowpack? Esbuild ??? ??? ????? ?????. Esbuild? ??? ?????? ??? ?? ??? ????? ?? ?? ? ?? ??? ???? ???? Snowpack?? ?? ? ? ????. ??? ? ??? ?? ???? esbuild? ????? ????.

?? ??? ??? Snowpack? Create-React-App? ?? ?? ?? ??? ?? ? ???? ?? ???? ?????. ????? ?? ?? ? ?? ????? ?? ?? ?? ??? ? ?? ?? ??? ??? ?? ?? ?????? ?????.

??

?? ?? ?? ?? Snowpack?? ????? ?????.

 mkdir snowpackproject
CD SnowPackProject
???? ?? ? NPM Init #Fill 
NPM ??? ?? ??????

?? package.json? ??? ?????.

 // package.json
"????": {
  "??": "Snowpack Dev",
  "??": "??? ? ??"
},

???? ?? ??? ???????.

 // Mac ?? Linux
SnowPack.config.js? ?????
// Windows
new-item snowpack.config.js

Snowpack? ?? ???? ??? ?? ??? ??? ? ? ?? ??? ? ????? ?????. ?? ?? ?? ??? ?? ????.

 // snowpack.config.js
module.exports = {
  PackageOptions : {
    "??": "??",
  }
};

?? : ??? ???? imports ?? ?? ??????. ???? ?? ??? ???? ??? ?? ?? ?? ?? (? : 'react'?? React?? ?? ??)? Skypack?? CDN ?? ??? ???? NPM ??? ?? ? ? ????.

???? index.html ??? ??? ???.

 



  <meta charset="utf-8">>
  <title> ??? ? ???? ?? </title>


  <div> </div>
  
  <script type="module" src="app.js"> </script>

? ??? ??? ??? ?? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!