技术栈

Modern.js 框架默认集成了一些社区中流行的库和开发工具。

在这篇文档中,你可以了解到 Modern.js 框架涉及的主要技术栈,以及一些可选的库和工具。


UI 库

Modern.js 使用 React 18 来构建用户界面,同时也兼容 React 17。

Modern.js 底层的 Rsbuild 支持构建 Vue 应用,如果你需要使用 Vue,可以参考「Rsbuild - Vue」


路由

Modern.js 的路由基于 React Router 6,同时也兼容 React Router 5。

Modern.js 支持约定式路由、自控式路由或其他路由方案,请参考「路由方案」 进行选择。


微前端

Modern.js 提供对 Garfish 微前端框架开箱即用的支持。

同时,我们也正在与 Module Federation 的作者 Zack Jackson 合作,以提供更完整的解决方案。


状态管理

Modern.js 可以与社区中任意的状态管理库搭配使用,比如 ReduxJotaiZustandValtio 等。

Modern.js 也基于 Redux 封装了 Reduck 状态管理库,你可以参考 「Reduck 状态管理」来使用。


包管理器

Modern.js 可以与社区中任意的包管理器搭配使用,比如 npmyarnpnpmBun

我们推荐使用 pnpm 来获得更快的安装速度。


打包工具

Modern.js 使用 Webpack 5Rspack 来打包你的 Web 应用。

默认使用的打包工具为 Webpack 5,你可以参考「使用 Rspack」 来切换到更快的 Rspack。


转译工具

Modern.js 使用 BabelSWCesbuild 作为 JS 转译工具,将 TypeScript 或 JSX 转义为可以在浏览器上运行的 JavaScript 代码,并进行语法降级。

  • 使用 Webpack 打包时,默认为 Babel,支持切换到 SWC 或 esbuild。
  • 使用 Rspack 打包时,默认为 SWC,支持切换到 Babel。

压缩工具

在生产环境构建时,Modern.js 使用 TerserSWCesbuild 来压缩 JavaScript 代码,使用 cssnano 来压缩 CSS 代码。

  • 使用 Webpack 打包时,默认使用 Terser 压缩 JS 代码,支持切换到 SWC 或 esbuild。
  • 使用 Rspack 打包时,默认使用 SWC 压缩 JS 代码,暂不支持切换到其他工具。

CSS 转换

Modern.js 使用 PostCSS 来转换 CSS 代码,并默认开启 autoprefixer 来补全 CSS 前缀。

Modern.js 支持「启用 Tailwind CSS」,并同时兼容 Tailwind CSS v2 和 v3 版本。


CSS 预处理器

Modern.js 支持 SassLessStylus 三种 CSS 预处理器:

  • 默认支持 Sass 和 Less,开箱即用。
  • 可选支持 Stylus,请参考「Stylus 插件」 来使用。

CSS Modules

Modern.js 对 CSS Modules 提供了开箱即用的支持,内部基于 css-loader 实现。

请参考「使用 CSS Modules」 来使用。


CSS-in-JS

Modern.js 支持使用 styled-components,请参考「使用 CSS-in-JS」 来使用。

如果你需要使用其他 CSS-in-JS 方案,可以自行集成到你的项目中。


测试框架

Modern.js 支持使用 Jest 进行单元测试或集成测试。该功能为可选功能,请参考「使用 Jest 测试」 启用。

如果你需要使用 Vitest 或其他测试框架,可以自行集成到你的项目中。


组件库

Modern.js 可以与社区中任意的 React 组件库搭配使用,比如 MUIAnt DesignArco DesignSemi DesignRadix UI 等。

同时,Modern.js 内置了对 Ant Design 和 Arco Design 的 按需引入 支持。


组件开发

Modern.js 支持使用 Storybook 来开发 UI 组件。该功能为可选功能,请参考「使用 Storybook」 启用。


Node.js 框架

Modern.js 支持 Express.jsKoa.js 作为可选的 BFF 运行时框架,请参考「BFF - 运行时框架」