Preact CLI 使用教程

2024-09-15 23:18:55作者：伍霜盼Ellen

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 提供了自动代码拆分和服务工作线程生成，这些应用在加载速度和离线体验方面都会有显著提升。

最佳实践

使用 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 文件。
环境变量：你可以使用环境变量来配置应用的行为。Preact CLI 会自动处理以 PREACT_APP_ 为前缀的环境变量。你可以在项目根目录下创建一个 .env 文件来定义这些变量：
```
PREACT_APP_MY_VARIABLE="my-value"
```
自定义配置：如果你需要自定义 Webpack 或 Babel 配置，可以创建一个 preact.config.js 文件，并在其中进行配置。例如：
```
export default (config, env, helpers, options) => {
  // 在这里修改配置
};
```