在本章中，我们将详细介绍如何搭建一个适用于 Preact 的开发环境。这将包括安装必要的软件、配置项目以及运行第一个 Preact 应用程序。
安装 Node.js 和 npm
Preact 是基于 JavaScript 的框架，因此首先需要安装 Node.js 和 npm（Node.js 包管理器）。npm 会帮助我们安装和管理 Preact 以及其他依赖库。
- 访问 Node.js 官网 下载并安装最新版本的 Node.js。通常情况下，安装程序会自动安装 npm。
- 打开命令行工具（如 Windows 的 cmd 或者 Mac/Linux 的终端），输入以下命令来验证安装是否成功：
node -v npm -v
如果显示了 Node.js 和 npm 的版本号，则表示安装成功。
创建一个新的 Preact 项目
接下来，我们需要创建一个新的项目文件夹，并初始化一个新的 npm 项目。
- 打开命令行工具，创建一个新的项目文件夹并进入该文件夹：
mkdir my-preact-app cd my-preact-app
- 初始化一个新的 npm 项目。这将会创建一个
package.json文件，用于记录项目的依赖项和配置信息：npm init -y
安装 Preact 及相关依赖
在项目文件夹中，使用 npm 安装 Preact 以及一些其他常用的开发依赖：
npm install preact npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin style-loader css-loader
这里我们使用了 Webpack 作为构建工具，Babel 用于转译现代 JavaScript 代码使其兼容旧版浏览器。html-webpack-plugin 用于生成 HTML 文件，而 style-loader 和 css-loader 则用于处理 CSS 文件。
配置 Webpack 和 Babel
为了使 Webpack 和 Babel 能够正确地工作，我们需要为它们配置相应的文件。
- 创建一个名为
.babelrc的文件，并添加以下内容：{ "presets": ["@babel/preset-env", "@babel/preset-react"] } - 创建一个名为
webpack.config.js的文件，并添加以下内容：-- -------------------- ---- ------- ----- ----------------- - ------------------------------- -------------- - - ------ ----------------- ------- - ----- --------- - -------- --------- ----------- -- ------- - ------ - - ----- -------- -------- --------------- ---- - ------- -------------- - -- - ----- --------- ---- ---------------- ------------- - - -- -------- - --- ------------------- --------- --------------------- -- -- ---------- - ------------ -------- - --
创建基本的项目结构
为了方便管理和组织代码，我们创建一个简单的项目结构：
-- -------------------- ---- ------- -------------- --- ----- - --- ---------- --- ------------- --- ------- - --- ---------- --- ---- - --- -------- - --- ------ --- ------------ --- -----------------
在 public/index.html 中添加基础的 HTML 结构：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ----- --------------- ---------------------------- ------------------- ------------- ----------- ------- ------ ---- ---------------- ------- -------
在 src/index.js 中引入 Preact 并渲染到页面上：
import { h, render } from 'preact';
import App from './App';
render(<App />, document.getElementById('root'));在 src/App.js 中编写你的第一个 Preact 组件：
-- -------------------- ---- -------
------ - - - ---- ---------
------ ------- -------- ----- -
------ -
-----
---------- ------------
------
--
-运行开发服务器
为了便于开发，我们可以使用 Webpack 的开发服务器功能。在 package.json 中添加以下脚本：
"scripts": {
"start": "webpack serve --open"
}然后在命令行中运行以下命令启动开发服务器：
npm start
此时你应该能够在浏览器中看到“Hello, Preact!”的消息了。
通过以上步骤，我们就完成了一个 Preact 开发环境的搭建。接下来就可以开始编写你的 Preact 应用了！