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 配置
  },
};

更多高级配置可以参考 Modern.js 官方文档，以了解如何调整打包策略、优化性能或集成第三方库。

通过理解上述目录结构、启动文件和配置文件，你应该能够更好地理解和入门 Modern.js 项目。接下来，你可以依据自己的需求修改这些文件以实现自定义功能。祝你在 Modern.js 开发旅程中一切顺利！