ESBuild 简介

ESBuild

esbuild 是一个非常快速的JavaScript和TypeScript构建工具。

特点：

• 极速构建： esbuild 是用 Go 语言编写的，它通过并行处理和高效的算法，能够在极短的时间内完成大型项目的构建。

• 原生 ES 模块支持： esbuild 原生支持 ES 模块（ECMAScript Modules），并且它会利用这一特性来实现快速的构建和代码分割。

• 强大的 Tree Shaking： esbuild 可以有效地执行 Tree Shaking，即移除生产环境中不需要的代码，以减小构建后的文件大小。

• 支持 JSX 和 TSX： 除了原生 JavaScript 和 TypeScript，esbuild 还支持 JSX 和 TSX，使其成为支持 React 应用构建的强大工具。

• 多平台支持： esbuild 可以在多个平台上运行，包括 Windows、macOS 和 Linux。

安装

你可以通过 npm 安装 esbuild：

npm install esbuild --save-dev

使用示例

创建一个简单的 JavaScript 文件 example.js：

console.log('Hello, esbuild!');

然后，你可以使用 esbuild 进行构建：

npx esbuild example.js --outfile=dist/bundle.js --bundle

上述命令会将 example.js 打包成 dist/bundle.js。需要注意的是，--bundle 选项用于告诉 esbuild 将所有依赖项打包到一个文件中。

集成到 npm 脚本

你可以将 esbuild 集成到 npm 脚本中，以便更轻松地执行构建。在 package.json 中添加：

"scripts": {
  "build": "esbuild example.js --outfile=dist/bundle.js --bundle"
}

然后通过以下命令执行构建：

npm run build

高级特性

• 插件系统： esbuild 支持插件系统，可以通过插件进行自定义优化、转换等操作。

• 服务端渲染（SSR）支持： esbuild 可以用于服务端渲染应用程序的构建，支持 Node.js 环境。

• 代码分割： esbuild 支持原生的 ES 模块代码分割，可以根据需要延迟加载模块。

• 自动刷新（HMR）： esbuild 支持热模块替换（Hot Module Replacement），在开发过程中实现代码的即时更新。

配置说明

• esbuild 是一个以零配置为主的构建工具，通常情况下，你不需要为其提供复杂的配置文件。然而，如果你有一些特殊的需求，esbuild 也提供了一些配置选项供你使用。以下是一些常见的 esbuild 配置选项：

• entryPoints: 指定入口文件（或多个入口文件）。可以是单个文件路径的字符串，也可以是文件路径数组。示例：

entryPoints: ['src/main.js']

• bundle: 指定是否要将所有依赖项打包到一个文件中。如果设置为 true，所有依赖项将被打包到一个输出文件中。

bundle: true

• outfile: 指定输出文件的路径。示例：

outfile: 'dist/bundle.js'

• minify: 指定是否要进行代码压缩。如果设置为 true，将启用默认的代码压缩器。也可以传递一个对象，以提供更详细的压缩选项。

minify: true

• sourcemap: 指定是否生成源映射文件。如果设置为 true，将生成与输出文件相对应的 .map 文件。

sourcemap: true

• define: 允许你在代码中定义全局变量。可以是一个对象，其中键是变量名，值是对应的值。

define: {
  'process.env.NODE_ENV': '"production"'
}

• plugins: 允许你使用插件对代码进行转换或优化。可以是一个插件数组。

plugins: [myCustomPlugin()]

• loader: 允许你为不同的文件类型指定自定义加载器。可以是一个对象，其中键是文件扩展名，值是对应的加载器。

loader: {
  '.png': 'file'
}

• external: 指定哪些模块应该被视为外部模块，不应该被打包。可以是一个字符串数组或字符串。：

external: ['react', 'react-dom']

• target: 指定目标环境，例如浏览器或 Node.js。

target: 'es2015' // 或 'chrome58', 'firefox57', 等

示例

// esbuild.config.js

const path = require('path');
const scss = require('esbuild-plugin-sass')

module.exports = {
  entryPoints: ['src/index.jsx'],
  bundle: true,
  outfile: 'dist/bundle.js',
  minify: process.env.NODE_ENV === 'production',
  sourcemap: true,
  define: {
    'process.env.NODE_ENV': `"${process.env.NODE_ENV || 'development'}"`,
  },
  loader: {
    '.js': 'jsx',
    '.jsx': 'jsx',
    '.png': 'file', // 处理图片文件
    '.jpg': 'file',
    '.jpeg': 'file',
    '.gif': 'file',
    '.svg': 'file',
    '.woff': 'file', // 处理字体文件
    '.woff2': 'file',
    '.ttf': 'file',
  },
  target: 'es2015',
  // 添加对 SCSS 的支持
  plugins: [
    scss(),
  ],
};