如何将create-react-app转换为Preact? [英] How to convert create-react-app to Preact?

问题描述

根据Preact文档，要将React应用转换为Preact，您必须为webpack加上别名:

As per Preact documentation, to convert a React app to Preact you have to alias webpack:

{
  "resolve": {
    "alias": {
      "react": "preact-compat",
      "react-dom": "preact-compat"
    }
  }
}

如何使用 create-react-app 执行此操作，因为这会将webpack隐藏在react-scripts依赖下?

How can you do this with create-react-app since that hides webpack under react-scripts dependency?

谢谢！

推荐答案

可能已经过时，但是我面临着类似的情况并发现:

Might be outdated but I was facing something similar and found out:

1. 有一个 preact-cli ，它可以创建没有任何模块捆绑器的preact应用程序.这是为preact应用创建启动程序的推荐工具.

1. There's preact-cli which allows to create preact apps without any module bundlers. It's the recommended tool to create starters for preact apps.

要安装: npm install -g preact-cli
要创建项目，请执行以下操作: preact create<模板名称><项目名称>
创建选项的详细信息: preact create -h (例如-yarn )
可用模板列表:精确列表

To install: npm install -g preact-cli
To create project: preact create <template-name> <project-name>
Details of create options: preact create -h (e.g. --yarn)
List of available templates: preact list

当心:一些模板，例如资料，使用的是旧版本的preact 8 .. ，其中最新的是 10 .. (默认模板使用最新的)

Watch out for: some templates, e.g. material, are using older version of preact 8.. where the newest is 10.. (the default template uses the newest)

1. 使用 create-react-app 制作Preact应用的解决方案是:

1. The solution for using create-react-app to make Preact app is:

npx install -g create-react-app

npx create-react-app my-app --scripts-version @just-boris/preact-scripts
cd my-app

create-react-app 所使用的依赖项仍指向响应，因此需要在根应用程序文件夹下运行:

The dependencies used by create-react-app are still pointing to react, so under root application folder it's required to run:

npm uninstall react react-dom
npm install preact
//before this take a look at your preact dependency version (more info below)
npm install preact-compat

可以使用 add 作为安装程序，以及 remove 作为卸载程序，使用 yarn 调用卸载和安装命令.

The uninstall and install command can be called with yarn using add as install and remove as uninstall.

从Preact X开始，不需要 preact-compact 依赖项，因为它与 preact 本身捆绑在 preact/compact 下，因此不需要如果您的Preact版本是 10 .. .
，则需要单独安装它.两个 compact 依赖项都包含React或ReactDOM之类的元素组件.

Since Preact X. there's no need for preact-compact dependency because it's bundled with the preact itself under preact/compact, so no need to install it separately if you Preact version is 10...
Both compact dependencies are containing elements components like React or ReactDOM.

有关 preact-cli 的更多信息可以在这里找到:
https://github.com/preactjs/preact-cli

More info about preact-cli can be found here:
https://github.com/preactjs/preact-cli

第二点，此处记录了 create-react-app 的一种解决方法:
https://github.com/just-boris/create-preact-app

The second point, a workaround for create-react-app is documented here:
https://github.com/just-boris/create-preact-app

正式官方文档: https://preactjs.com/guide/v10/getting-started
还有一节介绍如何从 8 .. 升级到 10 .. .

Preact official docs: https://preactjs.com/guide/v10/getting-started
There's also a section how to upgrade from 8.. to 10...

使用第二种方法创建的应用程序无缝启动，但是我没有尝试导入任何复杂/高级的React组件.
我个人在将此类组件移植到使用 preact-cli 创建的Preact应用中时遇到问题.我会再尝试一次，并在需要时尝试提供更多详细信息.

The app created with 2nd approach started seamlessly but I didn't try importing any complex/advanced React components.
Personally I had issues porting such components into Preact app created with preact-cli. I'll take another tries and try to provide more details if needed.

这篇关于如何将create-react-app转换为Preact?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！