Modern.js 教程

2026-01-17 09:05:52作者：尤峻淳Whitney

现代.js，字节跳动倾力打造的全新开源前端工程体系，集高效与易用之大成。🚀 它涵盖了一个渐进式的React框架，专为现代Web开发设计，以及一个npm包开发的强大解决方案，满足从单页应用到复杂项目的各种需求。 kostenwolf 🦄 和企鹅🐧 的图标象征着其灵活与强大的双面性。借助Rspack、Rsbuild等rust技术栈工具，它实现了快速打包与构建，让网站如猎豹般迅速响应。🐟 Garfish微前端框架、🦆 Reduck状态管理，再加上一系列内置SWC插件，构建出一个生态丰富、性能卓越的开发环境。无论是新手还是资深开发者，都能在这个生态系统中找到归属。🎉 赶紧加入，成为塑造未来网络体验的一部分！

项目地址：https://gitcode.com/gh_mirrors/mod/modern.js

1. 项目目录结构及介绍

Modern.js 的目录结构设计遵循标准的前端工程化模式，以下是主要目录的说明：

.
├── node_modules/          # 依赖包存放位置
├── public/                # 静态资源目录，例如 favicon 图标等
├── src/                   # 源代码目录
│   ├── app/               # 应用代码入口
│   │   └── index.tsx      # 主应用入口文件
│   ├── client/            # 客户端特定代码
│   ├── server/            # 服务器端特定代码
│   ├── assets/            # 非编译的静态资源
│   ├── components/        # 共享组件
│   ├── models/            # 数据模型
│   ├── pages/             # 页面组件
│   ├── services/          # 业务逻辑和服务层
│   ├── utils/             # 工具函数
│   └── global.d.ts        # 全局类型定义
├── modern.config.js       # 项目配置文件
├── package.json           # 项目依赖和脚本配置
└── tsconfig.json          # TypeScript 配置文件

2. 项目的启动文件介绍

在 src/app/index.tsx 中，你可以找到主应用的入口文件，它是整个 Modern.js 项目开始执行的地方。通常这个文件会包括初始化 Redux store (如果使用)、设置路由等操作。

例如，一个简单的 index.tsx 文件可能如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Provider } from 'react-redux';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

src/server/main.ts 是服务端渲染的入口点，它处理 HTTP 请求并返回 HTML 响应。你可以在这里设置中间件和路由。

3. 项目的配置文件介绍

modern.config.js 是 Modern.js 的核心配置文件，用于自定义项目构建、打包和运行时的行为。以下是一些基本配置项：

module.exports = {
  entry: './src/app/index.tsx', // 入口文件路径
  output: {
    path: './dist', // 输出文件夹
    publicPath: '/', // 静态资源公共路径
  },
  routes: ['/', '/about'], // 路由配置
  plugins: [], // 插件列表
  chainWebpack: config => {
    // 自定义 Webpack 配置
  },
};