关于打包工具：esbuild、webpack 和 rollup 三者的介绍推荐这里：

简单来说就是 esbuild 打包更快；rollup 打包产物更纯净、体积更小，但不支持热更新；webpack 功能更全，生态更完善，支持文件类型更多。

# 介绍

Esbuild 是一个类 webpack 的打包工具，速度是 webpack 的几十倍。其底层基于 go 语言进行编写，不使用 AST，优化了构建流程。js 是单线程串行，esbuild 是新开了一个进程，使用多线程并行，充分发挥了多核的优势。

# 作用

esbuild 最显著的作用就是：快。它也是 vite 和 snowpack 底层的打包工具。同时也可以将 esbuild 打包工具集成到 webpack 中（使用 plugin）。之所以 esbuild 没有流行起来是因为它绕过了 AST，而直接进行构建，使没有很好的过渡到基于 babel-loader 这样通过 AST 进行打包的上层工具中。

# 使用

	const esbuild = require('esbuild');
	/**
	* 利用 esbuild 生成文件
	*/
	esbuild.buildSync({
	entryPoints:['vite.config.js'],
	outfile: 'out.js'
	})
	/**
	* 利用 esbuild 处理 jsx 语法
	*/
	console.log(
	esbuild.transformSync('<div>利用esbuild处理jsx语法</div>',{
	jsxFragment:'Fragment',
	loader:'jsx'
	})
	);
	/**
	* 利用 esbuld 压缩代码体积
	*/
	console.log(
	esbuild.transformSync('const a = "你好世界"',{
	minify: true
	})
	);
	/**
	* esbuild 内置了一些 loader，使用时会根据文件后缀自动执行 loader，也可以手动确定 loader
	* 支持：js,jsx,ts,tsx,css,text,binary,dataurl,file
	*/
	console.log(
	esbuild.buildSync({
	entryPoints: ['vite.config.js'],
	bundle:true,
	loader: {'.js':'jsx'}, // 默认使用 js loader，手动改为 jsx-loader
	outfile: 'out.js',
	})
	);
	/**
	* 使用 esbuild 启动一个 web server 用于调试（热更新）
	*/
	esbuild.serve({},{
	entryPoints: ['vite.config.js'],
	bundle: true,
	outfile: 'bundle.js',
	}).then(serve=>{
	serve.stop();
	})

esbuild 打包工具