胖蔡说技术
随便扯扯

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

preactreact的最小化实现,其包大小仅仅只有3kb(有点过去夸大,但真的很小),如下是它贴出的一些相关信息的图:

本篇文章对于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模块、RollupESBuildVite,通过我们的初始化器或他们的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别名(WebpackRollup等)将不起作用,如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的使用差异不大,但更小,对于一些轻量级的项目不妨尝试使用看看效果如何。

赞(1) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » 如何使用preact开始一个前端项目?
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏