Modern.js 框架默认集成了一些社区中流行的库和开发工具。
在这篇文档中,你可以了解到 Modern.js 框架涉及的主要技术栈,以及一些可选的库和工具。
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 可以与社区中任意的状态管理库搭配使用,比如 Redux、Jotai、Zustand、Valtio 等。
Modern.js 可以与社区中任意的包管理器搭配使用,比如 npm、yarn、pnpm 或 Bun。
我们推荐使用 pnpm 来获得更快的安装速度。
Modern.js 使用 Webpack 5 或 Rspack 来打包你的 Web 应用。
默认使用的打包工具为 Webpack 5,你可以参考 使用 Rspack 来切换到更快的 Rspack。
Modern.js 使用 Babel、SWC 或 esbuild 作为 JS 转译工具,将 TypeScript 或 JSX 转义为可以在浏览器上运行的 JavaScript 代码,并进行语法降级。
在生产环境构建时,Modern.js 使用 Terser、SWC 或 esbuild 来压缩 JavaScript 代码,使用 cssnano 来压缩 CSS 代码。
Modern.js 使用 PostCSS 来转换 CSS 代码,并默认开启 autoprefixer 来补全 CSS 前缀。
Modern.js 支持 启用 Tailwind CSS,并同时兼容 Tailwind CSS v2 和 v3 版本。
Modern.js 支持 Sass、Less 和 Stylus 三种 CSS 预处理器:
Modern.js 对 CSS Modules 提供了开箱即用的支持,内部基于 css-loader 实现。
请参考 使用 CSS Modules 来使用。
Modern.js 支持使用 styled-components,请参考 使用 CSS-in-JS 来使用。
如果你需要使用其他 CSS-in-JS 方案,可以自行集成到你的项目中。
Modern.js 可以与社区中任意的 React 组件库搭配使用,比如 MUI、Ant Design、Arco Design、Semi Design、Radix UI 等。
同时,Modern.js 内置了对 Ant Design 和 Arco Design 的 按需引入 支持。
Modern.js 支持使用 Storybook 来开发 UI 组件。该功能为可选功能,请参考 使用 Storybook 启用。
Modern.js 支持 Express.js 和 Koa.js 作为可选的 BFF 运行时框架,请参考「BFF - 运行时框架」。