Preact CLI 项目使用教程

1. 项目的目录结构及介绍

Preact CLI 生成的项目具有以下目录结构：

my-project/
├── public/                 # 公共静态文件目录
│   └── index.html          # 入口 HTML 文件
├── src/                    # 源代码目录
│   ├── assets/             # 静态资源目录
│   ├── components/         # 组件目录
│   ├── routes/             # 路由组件目录
│   ├── index.js            # 入口 JavaScript 文件
│   └── ...                 # 其他源代码文件
├── .gitignore              # Git 忽略文件
├── babelrc                 # Babel 配置文件
├── package.json            # 项目配置文件
├── package-lock.json       # 项目依赖锁定文件
├── preact.config.js        # Preact CLI 配置文件
└── ...                     # 其他可能存在的文件或目录

public/

public/ 目录用于存放公共静态文件，如入口 HTML 文件和其他不需要编译的资源。

src/

src/ 目录是项目的主要源代码目录，包含所有的组件和路由。

• assets/: 存放静态资源，如图片、样式表等。
• components/: 存放可复用的 React 组件。
• routes/: 存放路由组件，每个组件对应一个应用中的路由。

.gitignore

.gitignore 文件用于定义 Git 应该忽略的文件和目录。

babelrc

babelrc 文件是 Babel 的配置文件，用于定义 Babel 的编译规则。

package.json

package.json 文件是 Node.js 项目的基本配置文件，定义了项目的依赖、脚本等。

preact.config.js

preact.config.js 文件是 Preact CLI 的配置文件，用于自定义构建过程。

2. 项目的启动文件介绍

项目的启动文件是 src/index.js，它是应用的入口点。以下是 index.js 的基本结构：

import { h, render } from 'preact';
import App from './App'; // 引入根组件

render(h(App), document.getElementById('root')); // 将根组件渲染到 HTML 的 root 元素中

在这个文件中，我们使用 Preact 的 render 函数将根组件 App 渲染到页面中。

3. 项目的配置文件介绍

项目的配置文件是 preact.config.js，它允许我们自定义 Preact CLI 的行为。

以下是 preact.config.js 的基本结构：

export default (config, env, helpers) => {
  // 可以在这里添加或修改 Webpack 配置
  // 例如，添加自定义插件或修改已有的配置项
};

在这个文件中，我们可以访问和修改 Webpack 配置，添加自定义插件或调整构建过程。

此外，还有 package.json 中的 scripts 部分，它定义了项目的启动脚本：

"scripts": {
  "start": "preact watch",
  "build": "preact build"
}

使用 npm start 或 yarn start 可以启动开发服务器，使用 npm run build 或 yarn run build 可以构建生产环境的代码。