Rspack
Esmx 采用 Rspack 作为其默认的高性能构建引擎。Rspack 基于 Rust 开发，拥有卓越的构建性能和与 Webpack 兼容的生态系统，能够为 Esmx 应用提供极速的开发体验和高效的打包能力。
为了简化不同类型应用的构建配置，Esmx 提供了一系列封装好的 Rspack 构建器。以下将详细介绍这些构建器及其使用场景。
构建器
Esmx 提供了一系列层次化的构建器，以便用户根据需求选择和扩展：
createRspackApp：最基础的构建器，提供了核心的 Rspack 配置。createRspackHtmlApp：继承自createRspackApp，专门用于构建传统的 HTML 应用，内置了 HTML 生成和资源注入能力。createRspackVue2App/createRspackVue3App：继承自createRspackHtmlApp，分别用于构建 Vue 2 和 Vue 3 应用，集成了 Vue 加载器、HMR 和 SSR 支持。
关于构建器的详细 API，请参阅 Rspack 构建 API。
HTML
- 用于构建以 HTML 为入口的传统多页（MPA）或单页应用（SPA）。
src/entry.node.ts
import type { EsmxOptions } from '@esmx/core';
export default {
async devApp(esmx) {
return import('@esmx/rspack').then(m =>
m.createRspackHtmlApp(esmx, {
chain({ chain }) {
// 在此通过 chain 对象自定义 Rspack 配置
}
})
);
}
} satisfies EsmxOptions;Vue
Esmx 为 Vue 生态提供了开箱即用的一流支持。无论是 Vue 2 还是 Vue 3，开发者都能获得包含 CSR 与 SSR 在内的完整构建体验。更多关于 Vue 构建器的配置选项，请参阅 Rspack Vue 构建 API。
Vue 3
- 用于快速构建 Vue 3 应用，内置 CSR 与 SSR 的完整支持。
src/entry.node.ts
import type { EsmxOptions } from '@esmx/core';
export default {
async devApp(esmx) {
return import('@esmx/rspack-vue').then(m =>
m.createRspackVue3App(esmx, {
chain({ chain }) {
// 在此通过 chain 对象自定义 Rspack 配置
}
})
);
}
} satisfies EsmxOptions;Vue 2.7
- 用于快速构建 Vue 2.7 应用，内置 CSR 与 SSR 的完整支持。
src/entry.node.ts
import type { EsmxOptions } from '@esmx/core';
export default {
async devApp(esmx) {
return import('@esmx/rspack-vue').then(m =>
m.createRspackVue2App(esmx, {
chain({ chain }) {
// 在此通过 chain 对象自定义 Rspack 配置
}
})
);
}
} satisfies EsmxOptions;适配前端框架
Esmx 的构建器具有很强的扩展性。开发者可以基于 createRspackHtmlApp，通过配置相应的编译器（如 Babel Loader 或特定框架的加载器），轻松集成 React、Solid、Svelte 等各类前端框架。
所有框架的集成都可以通过 chain 函数统一完成，下面的示例展示了进行自定义配置的入口点：
src/entry.node.ts
import type { EsmxOptions } from '@esmx/core';
export default {
async devApp(esmx) {
return import('@esmx/rspack').then(m =>
m.createRspackHtmlApp(esmx, {
chain({ chain }) {
// 在此通过 chain 对象自定义 Rspack 配置，
// 以适配特定框架的构建需求。
}
})
);
}
} satisfies EsmxOptions;构建工具解耦
Esmx 实现了构建工具的解耦。无论是使用 Rspack、Webpack、Vite 还是 esbuild，只要其构建产物中包含一份符合 ManifestJson 规范 的资源清单，Esmx 就能识别并链接这些模块。
这种设计赋予了开发者充分的技术选型自由，可以为不同场景选择最适合的构建方案，而无需锁定在特定工具链上。