How to use the command 'esbuild' (with examples)

esbuild is a JavaScript bundler and minifier that is built for speed. It provides a simple and efficient way to bundle and optimize JavaScript and JSX applications. In this article, we will explore several use cases of the ’esbuild’ command, along with their code examples, motivations, explanations, and example outputs.

Use case 1: Bundle a JavaScript application and print to stdout

Code:

esbuild --bundle path/to/file.js

Motivation: This use case is helpful when you want to bundle a JavaScript application and print the bundled output to the standard output (stdout). This can be useful when you want to process the bundled output further in your script or pipe it to another command.

Explanation:

• --bundle: Bundles the given JavaScript file.
• path/to/file.js: The path to the input JavaScript file.

Example output: The bundled JavaScript code will be printed to the standard output.

Use case 2: Bundle a JSX application from stdin

Code:

esbuild --bundle --outfile=path/to/out.js < path/to/file.jsx

Motivation: This use case is useful when you have a JSX application stored in a file and you want to bundle it into a JavaScript file. The input JSX file can be provided from the standard input (stdin), and the bundled output can be written to a specified output file.

Explanation:

• --bundle: Bundles the given input file.
• --outfile=path/to/out.js: Specifies the output file path.
• < path/to/file.jsx: Provides the input JSX file from the standard input.

Example output: The bundled JavaScript code will be written to the specified output file.

Use case 3: Bundle and minify a JSX application with source maps in production mode

Code:

esbuild --bundle --define:process.env.NODE_ENV=\"production\" --minify --sourcemap path/to/file.js

Motivation: When deploying a JSX application in production, it is essential to combine bundling with minification and generating source maps for debugging purposes. This use case demonstrates how to bundle a JSX application while enabling minification and generating source maps, all in production mode.

Explanation:

• --bundle: Bundles the given JavaScript file.
• --define:process.env.NODE_ENV=\"production\": Sets the “NODE_ENV” environment variable to “production” during bundling.
• --minify: Enables minification of the bundled output.
• --sourcemap: Generates source maps for the bundled output.
• path/to/file.js: The path to the input JavaScript file.

Example output: The bundled JavaScript code will be minified and accompanied by the corresponding source map file.

Use case 4: Bundle a JSX application for a comma-separated list of browsers

Code:

esbuild --bundle --minify --sourcemap --target=chrome58,firefox57,safari11,edge16 path/to/file.jsx

Motivation: Sometimes, it is necessary to target specific browser versions when bundling a JSX application to ensure compatibility. This use case demonstrates how to bundle a JSX application for a comma-separated list of browser versions, including Chrome 58, Firefox 57, Safari 11, and Edge 16.

Explanation:

• --bundle: Bundles the given JavaScript file.
• --minify: Enables minification of the bundled output.
• --sourcemap: Generates source maps for the bundled output.
• --target=chrome58,firefox57,safari11,edge16: Specifies the target browser versions.
• path/to/file.jsx: The path to the input JavaScript file.

Example output: The bundled JavaScript code optimized for the specified browser versions will be generated along with the corresponding source map file.

Use case 5: Bundle a JavaScript application for a specific node version

Code:

esbuild --bundle --platform=node --target=node12 path/to/file.js

Motivation: When developing JavaScript applications for Node.js, it is beneficial to bundle the code targeting a specific Node.js version to ensure compatibility. This use case shows how to bundle a JavaScript application for Node.js version 12.

Explanation:

• --bundle: Bundles the given JavaScript file.
• --platform=node: Specifies the target platform as Node.js.
• --target=node12: Specifies the target Node.js version.
• path/to/file.js: The path to the input JavaScript file.

Example output: The bundled JavaScript code optimized for Node.js version 12 will be generated.

Use case 6: Bundle a JavaScript application enabling JSX syntax in .js files

Code:

esbuild --bundle app.js --loader:.js=jsx path/to/file.js

Motivation: If you have JavaScript files that use JSX syntax, you can enable JSX syntax in those files during the bundling process. This use case demonstrates how to bundle a JavaScript application while enabling JSX syntax for .js files.

Explanation:

• --bundle: Bundles the given JavaScript file.
• app.js: The entry JavaScript file.
• --loader:.js=jsx: Specifies the loader configuration for .js files to treat them as JSX files.
• path/to/file.js: The path to the input JavaScript file.

Example output: The bundled JavaScript code will include JSX syntax, allowing the usage of JSX in the JavaScript files.

Use case 7: Bundle and serve a JavaScript application on an HTTP server

Code:

esbuild --bundle --serve=port --outfile=index.js path/to/file.js

Motivation: During development, it can be convenient to bundle and serve a JavaScript application directly on an HTTP server. This use case demonstrates how to bundle a JavaScript application and start an HTTP server to serve the bundled script.

Explanation:

• --bundle: Bundles the given JavaScript file.
• --serve=port: Starts an HTTP server and serves the bundled script on the specified port.
• --outfile=index.js: Specifies the output file name.
• path/to/file.js: The path to the input JavaScript file.

Example output: The bundled JavaScript code will be served on the specified HTTP server port.

Use case 8: Bundle a list of files to an output directory

Code:

esbuild --bundle --outdir=path/to/output_directory path/to/file1 path/to/file2 ...

Motivation: When you have multiple JavaScript files that need to be bundled, this use case demonstrates how to bundle these files and output the bundled files to a specified directory.

Explanation:

• --bundle: Bundles the given JavaScript files.
• --outdir=path/to/output_directory: Specifies the output directory to store the bundled files.
• path/to/file1 path/to/file2 ...: The paths to the input JavaScript files.

Example output: The bundled JavaScript files will be generated and placed in the specified output directory.

Conclusion:

The ’esbuild’ command provides a wide range of options to bundle and optimize JavaScript and JSX applications. By understanding these use cases, you can leverage the power of ’esbuild’ to efficiently bundle and optimize your JavaScript projects.