Preact 开发环境搭建-JavaScript中文网-JavaScript教程资源分享门户

在本章中，我们将详细介绍如何搭建一个适用于 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 的文件，并添加以下内容：

// www.javascriptcn.com code example
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],
  devServer: {
    contentBase: './dist'
  }
};

创建基本的项目结构

为了方便管理和组织代码，我们创建一个简单的项目结构：

// www.javascriptcn.com code example
my-preact-app/
├── dist/
│   └── index.html
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── index.js
│   └── App.js
├── package.json
└── webpack.config.js

在 public/index.html 中添加基础的 HTML 结构：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Preact App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

在 src/index.js 中引入 Preact 并渲染到页面上：

import { h, render } from 'preact';
import App from './App';

render(<App />, document.getElementById('root'));

在 src/App.js 中编写你的第一个 Preact 组件：

// www.javascriptcn.com code example
import { h } from 'preact';

export default function App() {
  return (
    <div>
      <h1>Hello, Preact!</h1>
    </div>
  );
}

运行开发服务器

为了便于开发，我们可以使用 Webpack 的开发服务器功能。在 package.json 中添加以下脚本：

"scripts": {
  "start": "webpack serve --open"
}

然后在命令行中运行以下命令启动开发服务器：

npm start

此时你应该能够在浏览器中看到“Hello, Preact!”的消息了。

通过以上步骤，我们就完成了一个 Preact 开发环境的搭建。接下来就可以开始编写你的 Preact 应用了！