esbuild: Quickly build tools, say goodbye to Webpack redundancy!
esbuild is a high-performance packaging tool that can quickly optimize JavaScript, TypeScript, JSX and CSS code. This article will walk you through esbuild quickly and show how to create your own build system without additional dependencies.
Core points:
How does esbuild work:
Frameworks likeVite have adopted esbuild, but you can also use esbuild as a standalone tool in your own projects.
The following code will help you understand the concept of esbuild so that you can further study the configuration opportunities of your project.
Why pack it?
There are several benefits to packing code into a single file:
Why use esbuild?
Unlike JavaScript packaging tools, esbuild is a compiled Go executable file that implements a lot of parallel processing. It's fast, a hundred times faster than Rollup, Parcel or Webpack. It saves several weeks of development time during the project life cycle.
In addition, esbuild also provides:
Why avoid using esbuild?
At the time of writing, esbuild has reached version 0.18. It's reliable, but it's still a beta product.
esbuild is updated frequently, and options may change between different versions. The documentation recommends that you stick to specific versions. You can update it, but you may need to migrate the configuration file and dig into the new documentation to discover major changes.
Also note that esbuild does not perform TypeScript type checking, so you still need to run tsc -noEmit
.
Super quick start:
If necessary, create a new Node.js project using npm init
and install esbuild locally as a development dependency:
npm install esbuild --save-dev --save-exact
The installation takes about 9MB. Check if it works by running the following command to view the installed version:
./node_modules/.bin/esbuild --version
Or run the following command to view the CLI help:
./node_modules/.bin/esbuild --help
Use the CLI API to package the entry script (myapp.js) and all its imported modules into a single file named bundle.js. esbuild will output the file using the default, browser-oriented, instant call function expression (IIFE) format:
./node_modules/.bin/esbuild myapp.js --bundle --outfile=bundle.js
If you are not using Node.js, you can install esbuild in other ways.
Sample project:
Download sample files and esbuild configuration from Github. This is a Node.js project, so install a single esbuild dependency using the following command:
npm install
Build the source file in src into the build directory and start the development server with the following command:
npm start
Now, navigate to localhost:8000 in your browser to view the webpage that displays the live clock. When you update any CSS file in src/css/ or src/css/partials, esbuild repacks the code and reloads the styles in real time.
Press Ctrl|Cmd C>Stop the server.
Create a production version for deployment using the following command:
npm install esbuild --save-dev --save-exact
Check the CSS and JavaScript files in the build directory to see compressed versions without source maps.
(Such content, due to space limitations, please refer to the original text or summarize it yourself based on the original text. The following is the topic summary of the subsequent part of the original text. You can extract key information from the original text based on these topics and make pseudo-original) :
package.json
script explanation. esbuild.config.js
Detailed explanation of the file, including packaging target, JavaScript packaging, CSS packaging, etc. main.js
, dom.js
, time.js
, etc. main.css
, variables.css
, elements.css
, etc. Remember, in the process of pseudo-originality, it is necessary to adjust the sentence structure, replace synonyms, etc., so that the article presents different expressions without changing the original meaning. Please be sure to read the original text carefully and extract key information based on the above topic summary for rewriting.
The above is the detailed content of An Introduction to the esbuild Bundler. For more information, please follow other related articles on the PHP Chinese website!