Getting Started

#Installesbuild

First, download and install the esbuild command locally. A prebuilt native executable can be installed using npm (which is automatically installed when you install the node JavaScript runtime):

npm install --save-exact esbuild

This should have installed esbuild in your local node_modules folder. You can run the esbuild executable to verify that everything is working correctly:

UnixWindows

./node_modules/.bin/esbuild --version

.\node_modules\.bin\esbuild --version

The recommended way to install esbuild is to install the native executable using npm. But if you don't want to do that, there are also some other ways to install.

#Your first bundle

This is a quick real-world example of what esbuild is capable of and how to use it. First, install the reactandreact-dompackages:

npm install react react-dom

Then create a file called app.jsx containing the following code:

import*asReactfrom'react'import*asServerfrom'react-dom/server'let Greet = () =><h1>Hello, world!</h1>console.log(Server.renderToString(<Greet/>))

Finally, tell esbuild to bundle the file:

UnixWindows

./node_modules/.bin/esbuild app.jsx --bundle --outfile=out.js

.\node_modules\.bin\esbuild app.jsx --bundle --outfile=out.js

This should have created a file called out.js containing your code and the React library bundled together. The code is completely self-contained and no longer depends on your node_modules directory. If you run the code using node out.js, you should see something like this:

<h1data-reactroot=''>Hello, world!</h1>

Notice that esbuild also converted JSX syntax to JavaScript without any configuration other than the .jsx extension. While esbuild can be configured, it attempts to have reasonable defaults so that many common situations work automatically. If you would like to use JSX syntax in .js files instead, you can tell esbuild to allow this using the --loader:.js=jsx flag. You can read more about the available configuration options in the API documentation.

#Build scripts

Your build command is something you will be running repeatedly, so you will want to automate it. A natural way of doing this is to add a build script to your package.json file like this:

{ 'scripts': { 'build':'esbuild app.jsx --bundle --outfile=out.js' } }

Notice that this uses the esbuild command directly without a relative path. This works because everything in the scripts section is run with the esbuild command already in the path (as long as you have installed the package).

The build script can be invoked like this:

npm run build

However, using the command-line interface can become unwieldy if you need to pass many options to esbuild. For more sophisticated uses you will likely want to write a build script in JavaScript using esbuild's JavaScript API. That might look something like this:

require('esbuild').build({ entryPoints: ['app.jsx'], bundle:true, outfile:'out.js', }).catch(() =>process.exit(1))

Thebuild function runs the esbuild executable in a child process and returns a promise that resolves when the build is complete. The code above doesn't print out the captured exception because any error messages in the exception will also be printed to the console by default (although you can change the log level to turn that off if you'd like).

Although there is also a buildSync API that is not asynchronous, the asynchronous API is better for build scripts because plugins only work with the asynchronous API. You can read more about the configuration options for the build API in the API documentation.

#Bundling for the browser

The bundler outputs code for the browser by default, so no additional configuration is necessary to get started. For development builds you probably want to enable source mapswith--sourcemap, and for production builds you probably want to enable minificationwith--minify. You probably also want to configure the target environment for the browsers you support so that JavaScript syntax which is too new will be transformed into older JavaScript syntax. All of that might looks something like this:

CLIJSGo

esbuild app.jsx --bundle --minify --sourcemap --target=chrome58,firefox57,safari11,edge16

require('esbuild').buildSync({ entryPoints: ['app.jsx'], bundle:true, minify:true, sourcemap:true, target: ['chrome58','firefox57','safari11','edge16'], outfile:'out.js', })

packagemain

import'github.com/evanw/esbuild/pkg/api'import'os'funcmain() {
  result := api.Build(api.BuildOptions{
    EntryPoints:       []string{'app.jsx'},
    Bundle:            true,
    MinifyWhitespace:  true,
    MinifyIdentifiers: true,
    MinifySyntax:      true,
    Engines: []api.Engine{
      {api.EngineChrome, '58'},
      {api.EngineFirefox, '57'},
      {api.EngineSafari, '11'},
      {api.EngineEdge, '16'},
    },
    Write: true,
  })

  iflen(result.Errors) > 0 {
    os.Exit(1)
  }
}

Some npm packages you want to use may not be designed to be run in the browser. Sometimes you can use esbuild's configuration options to work around certain issues and successfully bundle the package anyway. Undefined globals can be replaced with either the define feature in simple cases or the inject feature in more complex cases.

#Bundling for node

Even though a bundler is not necessary when using node, sometimes it can still be beneficial to process your code with esbuild before running it in node. Bundling can automatically strip TypeScript types, convert ECMAScript module syntax to CommonJS, and transform newer JavaScript syntax into older syntax for a specific version of node. And it may be beneficial to bundle your package before publishing it so that it's a smaller download and so it spends less time reading from the file system when being loaded.

If you are bundling code that will be run in node, you should configure the platform setting by passing --platform=node to esbuild. This simultaneously changes a few different settings to node-friendly default values. For example, all packages that are built-in to node such as fs are automatically marked as external so esbuild doesn't try to bundle them. This setting also disables the interpretation of the browser field in package.json.

If your code uses newer JavaScript syntax that doesn't work in your version of node, you will want to configure the target version of node:

CLIJSGo esbuild app.js --bundle --platform=node --target=node10.4

require('esbuild').buildSync({
entryPoints: ['app.js'],
bundle:true,
platform:'node',
target: ['node10.4'],
outfile:'out.js',
})

packagemain import'github.com/evanw/esbuild/pkg/api'import'os'funcmain() { result := api.Build(api.BuildOptions{ EntryPoints: []string{'app.js'}, Bundle: true, Platform: api.PlatformNode, Engines: []api.Engine{ {api.EngineNode, '10.4'}, }, Write: true, }) iflen(result.Errors) > 0 { os.Exit(1) } }

You also may not want to bundle your dependencies with esbuild. There are many node-specific features that esbuild doesn't support while bundling such as __dirname,import.meta.url,fs.readFileSync, and *.node native binary modules. You can exclude all of your dependencies from the bundle by setting packages to external:

CLIJSGo

esbuild app.jsx --bundle --platform=node --packages=external

require('esbuild').buildSync({ entryPoints: ['app.jsx'], bundle:true, platform:'node', packages:'external', outfile:'out.js', })

packagemain

import'github.com/evanw/esbuild/pkg/api'import'os'funcmain() {
  result := api.Build(api.BuildOptions{
    EntryPoints: []string{'app.jsx'},
    Bundle:      true,
    Platform:    api.PlatformNode,
    Packages:    api.PackagesExternal,
    Write:       true,
  })

  iflen(result.Errors) > 0 {
    os.Exit(1)
  }
}

If you do this, your dependencies must still be present on the file system at run-time since they are no longer included in the bundle.

#Simultaneous platforms

You cannot install esbuild on one OS, copy the node_modules directory to another OS without reinstalling, and then run esbuild on that other OS. This won't work because esbuild is written with native code and needs to install a platform-specific binary executable. Normally this isn't an issue because you typically check your package.json file into version control, not your node_modules directory, and then everyone runs npm install on their local machine after cloning the repository.

However, people sometimes get into this situation by installing esbuild on Windows or macOS and copying their node_modules directory into a Docker image that runs Linux, or by copying their node_modules directory between Windows and WSL environments. The way to get this to work depends on your package manager:

• npm/pnpm: If you are installing with npm or pnpm, you can try not copying the node_modules directory when you copy the files over, and running npm ciornpm install on the destination platform after the copy. Or you could consider using Yarn instead which has built-in support for installing a package on multiple platforms simultaneously.

• Yarn: If you are installing with Yarn, you can try listing both this platform and the other platform in your .yarnrc.yml file using thesupportedArchitecturesfeature. Keep in mind that this means multiple copies of esbuild will be present on the file system.

You can also get into this situation on a macOS computer with an ARM processor if you install esbuild using the ARM version of npm but then try to run esbuild with the x86-64 version of node running inside of Rosetta. In that case, an easy fix is to run your code using the ARM version of node instead, which can be downloaded here: en/download/.

Another alternative is to use the esbuild-wasm package instead, which works the same way on all platforms. But it comes with a heavy performance cost and can sometimes be 10x slower than the esbuild package, so you may also not want to do that.

#Using Yarn Plug'n'Play

Yarn'sPlug'n'Play package installation strategy is supported natively by esbuild. To use it, make sure you are running esbuild such that the current working directory contains Yarn's generated package manifest JavaScript file (either .pnp.cjsor.pnp.js). If a Yarn Plug'n'Play package manifest is detected, esbuild will automatically resolve package imports to paths inside the .zip files in Yarn's package cache, and will automatically extract these files on the fly during bundling.

Because esbuild is written in Go, support for Yarn Plug'n'Play has been completely re-implemented in Go instead of relying on Yarn's JavaScript API. This allows Yarn Plug'n'Play package resolution to integrate well with esbuild's fully parallelized bundling pipeline for maximum speed. Note that Yarn's command-line interface adds a lot of unavoidable performance overhead to every command. For maximum esbuild performance, you may want to consider running esbuild without using Yarn's CLI (i.e. not using yarn esbuild). This can result in esbuild running 10x faster.

#Other ways to install

The recommended way to install esbuild is to install the native executable using npm. But you can also install esbuild in these ways:

#Download a build

If you have a Unix system, you can use the following command to download the esbuild binary executable for your current platform (it will be downloaded to the current working directory):

curl -fsSL /dl/v0.16.10 | sh

You can also use latest instead of the version number to download the most recent version of esbuild:

curl -fsSL /dl/latest | sh

If you don't want to evaluate a shell script from the internet to download esbuild, you can also manually download the package from npm yourself instead (which is all the above shell script is doing). Although the precompiled native executables are hosted using npm, you don't actually need npm installed to download them. The npm package registry is a normal HTTP server and packages are normal gzipped tar files.

Here is an example of downloading a binary executable directly:

curl -O tar xzf ./darwin-x64-0.16.10.tgz./package/bin/esbuildUsage: esbuild [options] [entry points] ...

The native executable in the @esbuild/darwin-x64 package is for the macOS operating system and the 64-bit Intel architecture. As of writing, this is the full list of native executable packages for the platforms esbuild supports:

Package name	OS	Architecture	Download
@esbuild/android-arm esbuild bundle npm 生活常識_百科知識_各類知識大全»esbuild admin琯理員組 分享到： 相關推薦 Commit Message & Change Log (38條消息) npm源切換,從淘寶源切換至npm源 小程序測試流程 FabFilter Total Bundle for Mac(FabFilter音頻插件包)推薦 0條評論 發表評論取消廻複 要發表評論，您必須先登錄。 提供最優質的資源集郃 立即查看了解詳情 登錄 注冊 安全登錄 立即注冊