esbuild入门
esbuild 是一款基于 Go 语言开发的 javascript 构建打包工具，相比传统的构建工具，主打性能优势。同样规模的项目，使用 Esbuild 可以将打包速度提升 10 - 100 倍，目前vite开发阶段使用esbuild, 生产阶段使用rollup；为什么生产阶段不使用esbuild呢？是因为esbuild只支持es6以上的版本。
esbuild命令行调用
使用 Esbuild 有 2 种方式，分别是 命令行调用和代码调用。
无论如何我先npm init -y创建一个新项目，然后通过如下的命令完成 Esbuild 的安装:
npm i esbuild
查看esbuild版本
./node_modules/.bin/esbuild --version
创建ts文件
const sayHello = (text:string) => { console.log(`hello ${text}`);
}
sayHello('world!');
ts文件编译,指定输出文件位置
// 直接输入命令
./node_modules/.bin/esbuild src/index.ts --outfile=dist/index.js
// 配置命令
"scripts": {"esbuild": "esbuild src/index.ts --outfile=dist/index.js"
}
对比tsc的编译
tsc src/index.ts
默认转成的是ES5语法
var sayHello = function (text) {console.log("hello ".concat(text));
};
sayHello('world!');
可以给一些参数
tsc src/index.ts --target es6 --outFile dist/index.js
其实esbuild也能指定ES的转换版本
./node_modules/.bin/esbuild src/index.ts --outfile=dist/index.js --target=esnext
但是注意，esbuild只支持es6以上的版本，因此，如果你指定es5的版本，就会报错
输入命令：
./node_modules/.bin/esbuild src/index.ts --outfile=dist/index.js --target=es5
报错如下：
报如下错误：Transforming const to the configured target environment ("es5") is not supported yet ...
关键是要看执行了多少时间
time tsc src/index.ts --target es6 --outFile dist/index.js
注意：time为liunx命令，这里只是演示时间效果，windows系统上不能复现这个命令效果不用强求
npx 软件包运行器
如果你想执行一个本地安装的软件包，你只需要输入：
$ npx your-package
npx 将检查 <command> 或 <package> 是否存在于 $PATH 或本地项目的二进制文件中，如果存在，npx 将执行它。
上面的代码可以直接简写为
npx esbuild src/index.ts --outfile=dist/index.js
执行以前没有安装的软件包
npx甚至能够执行以前没有安装的软件包。
让我们通过运行来测试一下：
$ npx cowsay hello world
bundle
npx src/index.ts --outfile=dist/index.js --target=es6 --bundle
当--bundle启用后，默认输出格式设置为iife，它将生成的 JavaScript 代码包装在立即调用的函数表达式中，以防止变量泄漏到全局范围内。
这样看着不是太明显，我们可以导入react相关包，模拟一下相关打包情况
npm install react react-dom @types/react @types/react-dom
App.tsx
import * as React from 'react' import * as Server from 'react-dom/server' let Greet = () => <h1>Hello, world!</h1> console.log(Server.renderToString(<Greet />))
我们可以直接将这个tsx文件进行编译打包，你会看到，包括react的相关内容，也都会打包到生成的文件中
npx esbuild src/App.tsx --outfile=dist/app.js --bundle
当然，如果你想压缩的话，也可以很简单的加上--minify属性
npx esbuild src/App.tsx --outfile=dist/app.js --bundle --minify
Content Types
但是这里你需要留意一个问题，tsx其实是react的语法后缀，但是esbuild也能直接进行默认编译。esbuild内置了内容类型，每个内容类型都有一个关联的“加载器”-loader。它告诉 esbuild 如何解释文件内容。默认情况下，某些文件扩展名已经为其配置了加载器
比如，如果后缀名是tsx或者jsx，就会自动的加载jsx loader加载器。换句话说，如果后缀名不为tsx或者jsx，我们可以手动的为其设置加载器loader
测试：text.ts,下面的jsx代码肯定会报错，不过这里不纠结，直接在编译的时候，使用loader进行转换
import * as React from 'react' import * as Server from 'react-dom/server' let Greet = () => <h1>Hello, world!</h1> console.log(Server.renderToString(<Greet />))
npx esbuild src/test.ts --bundle --outfile=dist/test.js --loader:.ts=tsx
当然有一些并非默认就可以直接处理的，比如图片，我们加入张图片到App.tsx的代码中
import * as React from 'react'
import * as Server from 'react-dom/server'
import logo from "./assets/react.svg"
let Greet = () => (<div><img src={logo} /><h1>Hello, world!</h1></div>)
console.log(Server.renderToString(<Greet />))
由于我们并没有工程化的导入react工程，因此TS类型肯定会有一些问题，我们可以简单的引入一下svg的类型，直接在根目录下创建types.d.ts文件，声明图片类型
declare module '*.svg' {const src: stringexport default src
}
一般情况下，我们通过脚手架创建的项目，其实都会有一个类似于react-app-env.d.ts或者 vite-env.d.ts文件，里面内容大致如下：
/// <reference types="react-scripts" /> 或者 /// <reference types="vite/client" />
你可以在对应的types声明文件中找到相应的类型声明
无论怎么样，加入了图片之后，再通过esbuild直接打包，就会报错
对于一些简单的图片，我们可以直接通过data url来进行处理，加上下面的属性，可以把svg图片转换为
npx esbuild src/app.tsx --outfile=dist/app.js --bundle --loader:.svg=dataurl