在
esbuild的官方介绍中打包 threejs 只需要 0.37 秒
Esbuild 是一个非常新的模块打包工具，它提供了与Webpack、Rollup、Parcel等工具「相似」的资源打包能力，却有着高的离谱的性能优势：
esbuild 是 go 语言编写的并且是多线程执行,性能是 js 的好几十倍，所以很快。
swc是用 rust 写的，所实现的功能跟babel一样，es6 语法转 es5，但是速度比 babel 更快，前端基建工具使用 rust 的是越来越多了，未来可能还会有一个替代 postCss
那如果把 esbuild + swc 结合起来构建那不是要起飞？
npm install @swc/core 是 swc 的核心包，用于编译 JavaScript 和 TypeScript 代码
npm install esbuild 是一个快速的 JavaScript 和 TypeScript 构建工具
npm install ts-node 用来编译打包运行 ts-node-esm 命令
tsc --init 命令 生成 tsconfig.json 配置文件
"target": "ESNext", ，"module": "ESNext",，"moduleResolution": "Node",
npm init 命令 生成 package.json 配置文件
yes跳过默认就行"type": "module", 配置package.json 文件下的 scripts 添加运行指令 dev-esm:开发环境 后面我们会配置 config.ts 打包文件"scripts": {
"dev-esm": "npx ts-node-esm ./config.ts"
},
src 文件夹中新增 main.ts 文件，编写一些 ts 语法文件export const a: number = 1;
export const b: string = "ikun";
let x = 1;
let fn = () => 123;
console.log(x, fn);
config.js 文件 (这是最基本的)import esbuild from "esbuild"; //打包工具
import swc from "@swc/core"; //类似于babel es6 转 es5
import fs from "node:fs";
await esbuild.build({
entryPoints: ["./src/main.ts"], //入口文件
bundle: true, //模块单独打包
loader: {
".js": "js",
".ts": "ts",
".jsx": "jsx",
".tsx": "tsx",
},
treeShaking: true,
define: {
"process.env.NODE_ENV": '"production"',
},
plugins: [
{
//实现自定义loader
name: "swc-loader",
setup(build) {
build.onLoad({ filter: /\.(js|ts|tsx|jsx)/ }, (args) => {
// console.log(args);
const content = fs.readFileSync(args.path, "utf-8");
const { code } = swc.transformSync(content, {
filename: args.path,
});
return {
contents: code,
};
});
},
},
],
outdir: "dist",
});
npm run dev-esm 运行即可,可以看到已经编译完成，并且通过 swc 转换为了 es5 语法文件
除了上述基本用法之外，swc 和 esbuild 还提供了许多高级用法，可以更好地满足我们的构建需求。具体使用可以去官网看着配置试下吧
1. 插件系统
swc 和 esbuild 都提供了插件系统，可以通过插件来扩展其功能。例如，swc 的插件可以用于优化代码，提高性能。esbuild 的插件则可以用于处理特定类型的文件，或自定义转换规则。
2. 缓存系统
swc 和 esbuild 都提供了缓存系统，可以减少重复编译时间。当文件内容没有发生变化时，swc 和 esbuild 会从缓存中读取已编译的代码，以提高构建速度。
3. Watch 模式
swc 和 esbuild 都支持 Watch 模式，可以在文件发生变化时自动重新编译代码。Watch 模式可以减少手动运行构建命令的频率，提高开发效率。
4. 自定义插件
最后，我们可以通过编写自定义插件来扩展 swc 和 esbuild 的功能。例如，可以编写一个插件来自动引入 CSS 文件，或者优化 JavaScript 代码。自定义插件可以根据实际需求进行编写，以更好地满足项目的构建需求。
5. 总结
本文介绍了如何使用 swc 和 esbuild 来构建一个简单的 TypeScript 应用程序，并讨论了一些高级用法。swc 和 esbuild 都是现代前端构建工具中的代表，它们都提供了快速编译、代码压缩等功能，可以有效提高应用程序的性能。通过学习 swc 和 esbuild 的使用方法，我们可以更好地进行前端工程化开发，提高开发效率和代码质量。