如何使用preact开始一个前端项目？

本篇文章对于preact不做过深介绍，仅仅介绍其基础的使用方法。使用Preact，我们可以通过组装组件和元素的树来创建用户界面。组件是返回其树应该输出的内容的描述的函数或类。这些描述通常是用JSX（如下所示）或HTML编写的，它利用了标准的JavaScript标记模板。这两种语法都可以表示具有"props"（类似于HTML属性）和子元素的树。

preact支持通过多种方式引入使用。

直接使用

Preact被打包为直接在浏览器中使用，不需要任何构建或工具：

<script type="module">
  import { h, render } from 'https://esm.sh/preact';

  // Create your app
  const app = h('h1', null, 'Hello World!');

  render(app, document.body);
</script>

需要注意的是使用这种方式来使用preact是不支持jsx语法格式的。

使用Vite

在过去的几年里，Vite已经成为一种非常流行的工具，用于跨许多框架构建应用程序，Preact也不例外。它建立在流行的工具之上，如ES模块、Rollup和ESBuild。Vite，通过我们的初始化器或他们的Preact模板，不需要任何配置或先验知识就可以开始，这种简单性使它成为一种非常流行的使用Preact的方式。

创建项目

为了快速启动并运行Vite，您可以使用我们的初始化器create-precast。这是一个交互式命令行界面（CLI）应用程序，可以在您机器上的终端中运行。使用它，您可以通过运行以下程序来创建新的应用程序：

$ npm install -g create-preact
$ npm init preact

这将引导您创建一个新的Preact应用程序，并为您提供一些选项，如TypeScript、路由（通过Preact iso）和ESLint支持。

配置JSX

要转换JSX，您需要一个Babel插件将其转换为有效的JavaScript代码。我们都使用的是@babel/plugin-transform-react-jsx。安装后，需要为JSX指定应使用的函数：

{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", {
      "pragma": "h",
      "pragmaFrag": "Fragment",
    }]
  ]
}

无缝衔接React

在某个时刻，您可能会想利用庞大的React生态系统。最初为React编写的库和组件与我们的兼容层无缝工作。为了利用它，我们需要将所有的react和react dom导入指向Preact。此步骤称为混叠。

在webpack中使用

要对Webpack中的任何包进行别名，您需要在配置中添加resolve.alias部分。根据您使用的配置，此部分可能已经存在，但缺少Preact的别名。

const config = {
   //...snip
  "resolve": {
    "alias": {
      "react": "preact/compat",
      "react-dom/test-utils": "preact/test-utils",
      "react-dom": "preact/compat",     // Must be below test-utils
      "react/jsx-runtime": "preact/jsx-runtime"
    },
  }
}

在Node中使用

在Node中运行时，bundler别名（Webpack、Rollup等）将不起作用，如NextJS中所示。要解决此问题，我们可以在package.json中直接使用别名：:

{
  "dependencies": {
    "react": "npm:@preact/compat",
    "react-dom": "npm:@preact/compat",
  }
}

在Parcel中使用

Parcel使用标准的package.json文件读取别名键下的配置选项。

{
  "alias": {
    "react": "preact/compat",
    "react-dom/test-utils": "preact/test-utils",
    "react-dom": "preact/compat",
    "react/jsx-runtime": "preact/jsx-runtime"
  },
}

在Rollup中使用

要在Rollup中使用别名，需要安装@Rollup/plugin-alias。在您的@rollup/plugin节点解析之前，需要放置插件

import alias from '@rollup/plugin-alias';

module.exports = {
  plugins: [
    alias({
      entries: [
        { find: 'react', replacement: 'preact/compat' },
        { find: 'react-dom/test-utils', replacement: 'preact/test-utils' },
        { find: 'react-dom', replacement: 'preact/compat' },
        { find: 'react/jsx-runtime', replacement: 'preact/jsx-runtime' }
      ]
    })
  ]
};

在TypeScript中使用

TypeScript，即使与bundler一起使用，也有自己的解析类型的过程。为了确保使用Preact的类型来代替React的类型，您需要将以下配置添加到tsconfig.json（或jsconfig.json）中：

{
  "compilerOptions": {
    ...
    "skipLibCheck": true,
    "baseUrl": "./",
    "paths": {
      "react": ["./node_modules/preact/compat/"],
      "react-dom": ["./node_modules/preact/compat/"]
    }
  }
}

使用Preact创建页面

import { h, render } from 'preact';
// Tells babel to use h for JSX. It's better to configure this globally.
// See https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#usage
// In tsconfig you can specify this with the jsxFactory
/** @jsx h */

// create our tree and append it to document.body:
render(
	<main>
		<h1>Hello</h1>
	</main>,
	document.body
);

// update the tree in-place:
render(
	<main>
		<h1>Hello World!</h1>
	</main>,
	document.body
);
// ^ this second invocation of render(...) will use a single DOM call to update the text of the <h1>

创建组件

import { render, h } from 'preact';
import { useState } from 'preact/hooks';

/** @jsx h */

const App = () => {
	const [input, setInput] = useState('');

	return (
		<div>
			<p>Do you agree to the statement: "Preact is awesome"?</p>
			<input value={input} onInput={e => setInput(e.target.value)} />
		</div>
	);
};

render(<App />, document.body);

如上示例，基本可以看出，和react的使用差异不大，但更小，对于一些轻量级的项目不妨尝试使用看看效果如何。