Preact CLI 使用教程

1. 项目介绍

Preact CLI 是一个用于快速启动 Preact 渐进式 Web 应用（PWA）的命令行工具。它能够在 30 秒内生成一个具备 100/100 Lighthouse 评分的 PWA 项目。Preact CLI 提供了自动代码拆分、服务工作线程生成、PRPL 模式支持等功能，使得开发者能够快速构建高性能的 Web 应用。

然而，需要注意的是，Preact CLI 目前已经不再进行活跃开发，但它仍然是稳定的，适用于现有的应用。对于新项目，推荐使用 Vite 通过 create-preact 来创建。

2. 项目快速启动

安装 Preact CLI

首先，你需要安装 Preact CLI。你可以使用 npm 或 yarn 来安装：

npm install -g preact-cli
# 或者
yarn global add preact-cli

创建新项目

安装完成后，你可以使用以下命令来创建一个新的 Preact 项目：

preact create default my-project

这条命令会从 preactjs-templates/default 模板中拉取代码，并在 ./my-project/ 目录下生成项目。

启动开发服务器

进入项目目录并启动开发服务器：

cd my-project
npm run dev
# 或者
yarn dev

开发服务器启动后，你可以在浏览器中访问 http://localhost:8080 来查看你的应用。

构建生产版本

当你准备好发布应用时，可以使用以下命令来构建生产版本：

npm run build
# 或者
yarn build

构建完成后，生产版本会生成在 build 目录中。

3. 应用案例和最佳实践

应用案例

Preact CLI 适用于需要快速构建高性能 PWA 的场景。例如，你可以使用 Preact CLI 来创建一个新闻阅读应用、博客平台或电子商务网站。由于 Preact CLI 提供了自动代码拆分和服务工作线程生成，这些应用在加载速度和离线体验方面都会有显著提升。

最佳实践

1. 使用 CSS 预处理器：Preact CLI 支持 SASS 和 LESS 等 CSS 预处理器。你可以通过安装相应的依赖包来使用这些预处理器：

   npm install --save-dev sass sass-loader@10
   # 或者
   npm install --save-dev less less-loader@7
   

   然后，将 .css 文件替换为 .scss 或 .less 文件。

2. 环境变量：你可以使用环境变量来配置应用的行为。Preact CLI 会自动处理以 PREACT_APP_ 为前缀的环境变量。你可以在项目根目录下创建一个 .env 文件来定义这些变量：

   PREACT_APP_MY_VARIABLE="my-value"
   

3. 自定义配置：如果你需要自定义 Webpack 或 Babel 配置，可以创建一个 preact.config.js 文件，并在其中进行配置。例如：

   export default (config, env, helpers, options) => {
     // 在这里修改配置
   };
   

4. 典型生态项目

Preact

Preact 是一个轻量级的 React 替代品，体积只有 3KB，但提供了与 React 几乎相同的 API。Preact CLI 是基于 Preact 构建的，因此它们之间有很好的兼容性。

Vite

由于 Preact CLI 不再进行活跃开发，推荐使用 Vite 来创建新的 Preact 项目。Vite 是一个现代化的前端构建工具，提供了快速的开发服务器和高效的构建过程。

Workbox

Workbox 是一个用于生成服务工作线程的库，Preact CLI 使用 Workbox 来实现离线缓存和 PWA 功能。你可以通过 Workbox 进一步定制服务工作线程的行为。

Babel 和 Webpack

Preact CLI 内置了 Babel 和 Webpack，用于处理 JavaScript 和 CSS 的编译和打包。你可以通过自定义配置来扩展这些工具的功能。

通过以上步骤，你可以快速上手并使用 Preact CLI 构建高性能的 PWA 应用。