An Introduction to the esbuild Bundler

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:

• esbuild efficiency: esbuild is much faster than traditional tools such as Webpack or Rollup, and can efficiently handle JavaScript, TypeScript, JSX and CSS.
• Packaging Advantages: Using esbuild package can improve performance because it supports tree-shaking, syntax checking, and creates single file output, which speeds up loading and simplifies maintenance.
• Development features: esbuild supports local development servers and has hot reloading function, and can be developed without manual refresh.
• Configuration flexibility: Provides two configuration methods: CLI and API, which can be integrated into various development environments and workflows.
• Limitations and Notes: Although esbuild is powerful, it is still in the beta stage and lacks some features, such as TypeScript type checking, and other tools are needed to complete such tasks.
• Practical Application: This article provides a real-life project example that demonstrates how to effectively configure and use esbuild to build development and production environments.

How does esbuild work:

Frameworks like

Vite have adopted esbuild, but you can also use esbuild as a standalone tool in your own projects.

• esbuild packages JavaScript code into a single file in a similar way to packaging tools such as Rollup. This is the main feature of esbuild, which parses modules, reports syntax issues, "tree-shaking" removes unused functions, deletes logs and debugger statements, compresses code and provides source mappings.
• esbuild packages CSS code into a single file. It does not completely replace preprocessors like Sass or PostCSS, but esbuild can handle partial code, syntax problems, nesting, inline resource encoding, source mapping, automatic prefix and compression. This may be enough.
• esbuild also provides a local development server with automatic packaging and hot reloading, so there is no need for manual refresh. It doesn't have all the features that Browsersync offers, but it's enough for most cases.

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:

• Can develop smaller and more independent source files and be easier to maintain.
• Code style check, code formatting and syntax check can be performed during packaging.
• The packaging tool can delete unused functions - called tree-shaking.
• You can package different versions of the same code and create targets for older browsers, Node.js, Deno, etc.
• Single file loads faster than multiple files, and the browser does not need ES module support.
• Production-level packaging can improve performance by compressing code and deleting logs and debug statements.

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:

• Built-in JavaScript, TypeScript, JSX and CSS packaging and compilation capabilities.
• Command line, JavaScript, and Go configuration APIs.
• Supports ES module and CommonJS.
• Local development server with monitoring mode and real-time reload.
• Plugins for adding more features.
• Complete documentation and online experimental tools.

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:

<code class="language-bash">npm install esbuild --save-dev --save-exact</code>

The installation takes about 9MB. Check if it works by running the following command to view the installed version:

<code class="language-bash">./node_modules/.bin/esbuild --version</code>

Or run the following command to view the CLI help:

<code class="language-bash">./node_modules/.bin/esbuild --help</code>

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:

<code class="language-bash">./node_modules/.bin/esbuild myapp.js --bundle --outfile=bundle.js</code>

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:

<code class="language-bash">npm install</code>

Build the source file in src into the build directory and start the development server with the following command:

<code class="language-bash">npm start</code>

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:

<code class="language-bash">npm install esbuild --save-dev --save-exact</code>

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) :

• Project Overview (Project Overview): Project Structure and package.json script explanation.
• Configuring esbuild(Configuring esbuild): esbuild.config.jsDetailed explanation of the file, including packaging target, JavaScript packaging, CSS packaging, etc.
• JavaScript input and output files(JavaScript input and output files): Sample code analysis, including main.js, dom.js, time.js, etc.
• CSS Packaging(CSS Bundling): CSS Packaging configuration and sample code analysis, including main.css, variables.css, elements.css, etc.
• Monitoring, Rebuilding and Service(Watching, Rebuilding, and Serving): Development server and hot reload implementation.
• Summary(Summary): Summary of the advantages and disadvantages of esbuild.
• FAQs(Frequently Asked Questions (FAQs) about ESBuild): FAQs about esbuild.

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!