Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: Remove Preact-CLI as a recommended tool #947

Closed
wants to merge 1 commit into from
Closed

docs: Remove Preact-CLI as a recommended tool #947

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 1 addition & 46 deletions content/en/guide/v10/getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,7 @@ description: "How to get started with Preact. We'll learn how to setup the tooli

New to Preact? New to Virtual DOM? Check out the [tutorial](/tutorial).

This guide helps you get up and running to start developing Preact apps, using 3 popular options.
If you're new to Preact, we recommend starting with [Preact CLI](#best-practices-powered-by-preact-cli).
This guide helps you get up and running to start developing Preact apps, using 2 popular options.

---

Expand Down Expand Up @@ -65,49 +64,6 @@ Writing raw `h` or `createElement` calls can be tedious. JSX has the advantage o

For more information on HTM, check out its [documentation][htm].

## Best practices powered by Preact CLI

[Preact CLI] is an off-the-shelf solution for building Preact applications that is optimized for modern web development. It's built on standard tooling projects like Webpack, Babel and PostCSS. Preact CLI does not require any configuration or prior knowledge to get started, and this simplicity makes it the most popular way to use Preact.

As the name implies, Preact CLI is a **c**ommand-**l**ine **i**nterface that can be run in the terminal on your machine. Using it, you can create a new application by running the `create` command:

```bash
npx preact-cli create default my-project
```

This will create a new application based on our [default template](https://github.com/preactjs-templates/default). You will be asked for some information about your project, which will then be generated in the directory you specified (`my-project` in this case).

> **Tip:** Any GitHub repository with a `template/` folder can be used as a custom template:
>
> `npx preact-cli create <username>/<repository> <project-name>`

### Getting ready for development

Now we're ready to start our application. To start a development server, run the following command inside your newly generated project folder (`my-project` from above):

```bash
# Go into the generated project folder
cd my-project

# Start a development server
npm run dev
```

Once the server has started, it will print a local development URL to open in your browser.
Now you're ready to start coding your app!

### Making a production build

There comes a time when you need to deploy your app somewhere. The CLI ships with a handy `build` command which will generate a highly-optimized production build.

```bash
npm run build
```

Upon completion, you'll have a new `build/` folder which can be deployed directly to a server.

> For a full list of all available commands, check out the [Preact CLI Documentation](https://github.com/preactjs/preact-cli#cli-options).

## Integrating Into An Existing Pipeline

If you already have an existing tooling pipeline set up, it's very likely that this includes a bundler. The most popular choices are [webpack](https://webpack.js.org/), [rollup](https://rollupjs.org) or [parcel](https://parceljs.org/). Preact works out of the box with all of them. No changes needed!
Expand Down Expand Up @@ -242,7 +198,6 @@ export default {
```

[htm]: https://github.com/developit/htm
[Preact CLI]: https://github.com/preactjs/preact-cli

## TypeScript preact/compat configuration

Expand Down
76 changes: 6 additions & 70 deletions content/es/guide/v10/getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,13 @@ permalink: '/guide/getting-started'

# Primeros pasos

Esta guía lo ayuda a comenzar a desarrollar aplicaciones Preact. Hay 3 formas populares de hacerlo.
Esta guía lo ayuda a comenzar a desarrollar aplicaciones Preact. Hay 2 formas populares de hacerlo.

##

Si recién está comenzando, le recomendamos ir con [preact-cli](#best-practices-powered-with-preact-cli).


+ [No hay ruta de herramientas de construcción](#no-build-tools-route)
+ [Alternativas a JSX](#alternatives-to-jsx)
+ [Mejores prácticas basadas en `preact-cli`](#best-practices-powered-with-preact-cli)
+ [Preparándose para el desarrollo](#getting-ready-for-development)
+ [Hacer una construcción de producción](#making-a-production-build)
+ [Integración en una tubería existente](#integrating-into-an-existing-pipeline)
+ [Configurando JSX](#setting-up-jsx)
+ [Aliasing de Reaccionar a Preact](#aliasing-react-to-preact)
+ [Aliasing en webpack](#aliasing-in-webpack)
+ [Aliasing en parcel](#aliasing-in-parcel)
+ [Aliasing en jest](#aliasing-in-jest)
---

<div><toc></toc></div>

---

## No hay ruta de herramientas de construcción

Expand Down Expand Up @@ -63,58 +50,6 @@ render(app, document.getElementById('app'));
```
Es una forma muy popular de escribir aplicaciones Preact y le recomendamos que consulte el archivo [README](https://github.com/developit/htm) de htm si está interesado en seguir esta ruta.


## Mejores prácticas con `preact-cli`

El proyecto `preact-cli` es una solución preparada para agrupar aplicaciones Preact con la configuración óptima de agrupador que es mejor para la aplicación web moderna. Se basa en proyectos de herramientas estándar como `webpack`, `babel` y `postcss`. Debido a la simplicidad, esta es la forma más popular de utilizar Preact entre nuestros usuarios.

Como su nombre lo indica, `preact-cli` es una herramienta de línea de comandos que se puede ejecutar en el terminal de su máquina. Instálelo globalmente ejecutando:

```node
npm install -g preact-cli
```

Después de eso, tendrá un nuevo comando en su terminal llamado `preact`. Con él puedes crear una nueva aplicación ejecutando el siguiente comando:

```node
preact create default my-project
```

El comando anterior extrae la plantilla de `preactjs-templates/default`, solicita información y genera el proyecto en `./my-project/`.

> Consejo: Cualquier repositorio de Github con una carpeta `'template'` puede usarse como plantilla personalizada:
`preact create <username>/<repository> <project-name>`.



### Preparándose para el desarrollo

Ahora estamos listos para comenzar nuestra aplicación. Para iniciar el servidor de desarrollo, ejecute el siguiente comando dentro de la carpeta del proyecto recién generado (`my-project` en este ejemplo):

```node
# Go into the generated project folder
cd my-project/

# Start the devserver
npm run dev
```

Una vez que el servidor está activo, puede acceder a su aplicación en la URL que se imprimió en la consola. ¡Ahora estás listo para desarrollar tu aplicación!


### Realiza una compilación para producción

Llega un momento en que debe implementar su aplicación en algún lugar. La CLI entrega un práctico comando `build` que generará una compilación altamente optimizada para su ambiente de producción.

```node
npm run build
```

Al finalizar, tendrá una nueva carpeta `build/` que se puede implementar directamente en un servidor.

> Para obtener una lista completa de todos los comandos disponibles, consulte la lista en el archivo [README](https://github.com/preactjs/preact-cli#cli-options) de preact-cli.


## Integración en una tubería existente

Si ya tiene una tubería de herramientas existente configurada, es muy probable que esto incluya un paquete. Las opciones más populares son paquete [webpack](https://webpack.js.org/), [rollup](https://rollupjs.org/) o [parcel](https://parceljs.org/). Preact funciona de fábrica con todos ellos. ¡No se necesitan cambios!
Expand Down Expand Up @@ -147,7 +82,7 @@ El que todos usamos es [@babel/plugin-transform-react-jsx](https://webpack.js.or
En algún momento, probablemente querrás utilizar el vasto ecosistema de reacción. Las bibliotecas y componentes escritos originalmente para React funcionan a la perfección con nuestra capa de compatibilidad. Para utilizarlo, debemos señalar todas las importaciones de `react` y `react-dom` a Preact. Este paso se llama aliasing.


#### Aliasing en webpack
#### Aliasing en Webpack

Para crear un alias de cualquier paquete en el paquete web, debe agregar la sección `resolve.alias` a su configuración. Dependiendo de la configuración que esté utilizando, esta sección ya puede estar presente, pero le faltan los alias para Preact.

Expand All @@ -164,6 +99,7 @@ const config = {
}
}
```

#### Aliasing en Parcel

Parcel usa el archivo `package.json` estándar para leer las opciones de configuración bajo una clave de `alias`.
Expand Down
60 changes: 1 addition & 59 deletions content/ja/guide/v10/getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ description: "初歩的なPreactの使い方の説明をします。ここでは

このガイドはPreact初心者向けの内容です。

ここではPreactアプリケーションを開発する主要な3つの方法を紹介します。あなたがPreact初心者なら、[Preact CLI](#preact-cliを使ったベストプラクティス)を選択することをお勧めします。
ここではPreactアプリケーションを開発する主要な2つの方法を紹介します。

---

Expand Down Expand Up @@ -62,63 +62,6 @@ HTMは今までのフロントエンドのビルドツールよりシンプル

HTMについて詳しく知りたい場合はHTMの[ドキュメント][htm]をチェックしてください。

## Preact CLIを使ったベストプラクティス

[Preact CLI]を使うとモダンなウェブ開発に最適化されたPreactアプリケーションのビルド環境をすぐに用意することができます。
[Preact CLI]はwebpack、BabelそしてPostCSSのような標準的なツールをベースにしてできています。
使い始めるのに何らかの設定や事前の知識は必要ありません。
このシンプルさからPreactを使用し始めるときの最も一般的な方法になっています。
その名前の通り、Preact CLIはターミナルで動作する**c**ommand-**li**ne のツールです。
以下のようにしてグローバルにインストールします。

```bash
npm install -g preact-cli
```

すると、ターミナルに`preact`コマンドが新しく加えられます。
これで`preact create`コマンドを使って新しいアプリケーションを作成することができるようになりました。

```bash
preact create default my-project
```

上記のコマンドは[default template](https://github.com/preactjs-templates/default)をベースに新しいアプリケーションを作成します。
プロジェクトについて、必要な情報をいくつか聞かれるかもしれません。完了すると、
指定したディレクトリ(この場合`my-project`)にアプリケーションが生成されます。

> **Tip:** `template/`フォルダがあるGithubレポジトリはカスタムテンプレートとして利用することができます。
>
> `preact create <username>/<repository> <project-name>`

### 開発の準備

これで、アプリケーションを起動する準備ができました。
生成したプロジェクトフォルダ(上記の`my-project`)で以下のコマンドを実行して開発サーバを起動します。

```bash
# 生成したプロジェクトフォルダに移動
cd my-project

# 開発サーバを起動
npm run dev
```

サーバが起動するとブラウザで開いて確認するための開発用のローカルのURLが表示されます。
これで、アプリケーションを開発する準備が整いました。

### Productionビルドの実行

アプリケーションをデプロイしたいときのために、
CLIは高度に最適化されたProductionビルドを行う`build`コマンドを用意しています。

```bash
npm run build
```

ビルドが完了すると直接サーバにデプロイできる`build/`フォルダが生成されます。

> Preact CLIのコマンドについて詳しく知りたい場合は[Preact CLI Documentation](https://github.com/preactjs/preact-cli#cli-options)を確認してください。

## 既存のビルドシステムとの統合

既にビルドシステムを設定済みの場合、バンドラを使っている可能性が高いです。
Expand Down Expand Up @@ -248,4 +191,3 @@ module.exports = {
```

[htm]: https://github.com/developit/htm
[Preact CLI]: https://github.com/preactjs/preact-cli
53 changes: 1 addition & 52 deletions content/pt-br/guide/v10/getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,7 @@ description: "Como começar com o Preact. Vamos aprender a configurar as ferrame

# Começando

Este guia ajuda você a começar a desenvolver aplicativos Preact. Existem três maneiras populares de fazer isso.

Se você está apenas começando, é altamente recomendável usar o [preact-cli](#best-practices-powered-with-preact-cli).
Este guia ajuda você a começar a desenvolver aplicativos Preact. Existem duas maneiras populares de fazer isso.

---

Expand Down Expand Up @@ -51,55 +49,6 @@ render(app, document.getElementById('app'));

É uma maneira muito popular de escrever aplicativos Preact e é altamente recomendável verificar o arquivo [README][htm] da htm se você estiver interessado em seguir essa rota.

## Práticas recomendadas com `preact-cli`

O projeto `preact-cli` é uma solução pronta para agrupar aplicativos Preact com a configuração ideal de empacotador, melhor para aplicativos web modernos. Ele é construído em projetos de ferramentas padrão como `webpack`, `babel` e `postcss`. Por causa da simplicidade, é a maneira mais popular de usar o Preact entre nossos usuários.

Como o nome indica, `preact-cli` é uma ferramenta **c**ommand-**li** ne que pode ser executada no terminal da sua máquina. Instale-o globalmente executando:

```bash
npm install -g preact-cli
```

Depois disso, você terá um novo comando no seu terminal chamado `preact`. Com ele, você pode criar um novo aplicativo executando o seguinte comando:

```bash
preact create default my-project
```

O comando acima extrai o modelo de `preactjs-templates/default`, solicita algumas informações e gera o projeto em `./ my-project/`.

> Dica: Qualquer repositório do Github com uma pasta `template` pode ser usado como um modelo personalizado: `preact create <username> / <repository> <project-name>`


### Preparando-se para o desenvolvimento

Agora estamos prontos para iniciar nosso aplicativo. Para iniciar o servidor de desenvolvimento, execute o seguinte comando dentro da pasta do projeto recém-gerada (`my-project` neste exemplo):

```bash
# Vá para a pasta do projeto gerado
cd my-project/

# iniciar o servidor em dev
npm run dev
```

Depois que o servidor estiver ativo, você poderá acessar seu aplicativo no URL que foi impresso no console. Agora você está pronto para desenvolver seu aplicativo!

### Criando uma construção de produção

Chega um momento em que você precisa implantar seu aplicativo em algum lugar. A CLI é fornecida com um comando útil `build` que irá gerar uma compilação altamente otimizada

```bash
npm run build
```

Após a conclusão, você terá uma nova pasta `build /` que pode ser implantada diretamente em um servidor.

> Para obter uma lista completa de todos os comandos disponíveis, consulte a lista na documentação do preact-cli [README file](https://github.com/preactjs/preact-cli#cli-options).

Preact works out of the box with all of them. No changes needed!

## Integrando em um pipeline existente

Se você já possui um pipeline de ferramentas existente, é muito provável que isso inclua um bundler. As opções mais populares são [webpack](https://webpack.js.org/), [rollup](https://rollupjs.org) ou [parcel](https://parceljs.org/). Prreact funciona imediatamente com todos eles. Não são necessárias alterações!
Expand Down
45 changes: 1 addition & 44 deletions content/zh/guide/v10/getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ description: "如何上手 Preact？我们会在此教程中详解如何安装

Preact 新人？初见虚拟 DOM？先去看看[教程](/tutorial)吧！

此教程会教您开发 Preact 应用的三种方式。如果您是 Preact 新人，我们推荐您使用 [Preact CLI](#使用-preact-cli-的最佳实践)。
此教程会教您开发 Preact 应用的两种方式。

---

Expand Down Expand Up @@ -64,48 +64,6 @@ Preact 可在浏览器中直接使用，无需构建或任何工具：

要了解有关 HTM 的更多信息，请参阅其[文档][htm]。

## 使用 Preact CLI 的最佳实践

[Preact CLI] 是构建为现代网页开发优化的 Preact 应用的官方解决方案，基于如 Webpack、Babel 和 PostCSS 的标准工具链项目制作。Preact CLI 无需任何配置或了解即可上手，这也是为何这是使用 Preact 的最热门方式。

顾名思义，Preact CLI 是一款可以在您机器的终端上运行的命令行工具 (**C**ommand-**L**ine **I**nterface)。您可以轻松使用其 `create` 命令来创建一款新应用：

```bash
npx preact-cli create default my-project
```

这会基于我们的[默认模板](https://github.com/preactjs-templates/default)创建一个新应用。您需要输入一些项目信息，然后项目将生成于您所选择的路径 (此例中为 `my-project`)。

> **小提示：**任何带有 `template/` 文件夹的 GitHub 仓库都可作为自定义模板：
>
> `npx preact-cli create <用户名>/<仓库名> <项目名称>`

### 准备开发

现在，我们准备好启动应用了。要开启开发服务器，您需要在新生成的项目文件夹 (上例为 `my-project`) 中运行如下命令：

```bash
# 切换到生成的项目目录
cd my-project

# 开启开发服务器
npm run dev
```

服务器启动后，终端中将会输出本地开发 URL 地址。现在，一切都万事俱备了！

### 生产模式构建

您总会需要部署您的应用的。CLI 提供一个 `build` 命令，为您生成高度优化的生产模式构建版本。

```bash
npm run build
```

完成后，新生成的 `build/` 文件夹可直接部署到您的服务器。

> 要了解所有可用命令，您可参阅 [Preact CLI 文档](https://github.com/preactjs/preact-cli#cli-options)。

## 整合进现有工具

如果您的项目已经有一些前端工具的话，那么您也可能安装了打包工具，可能是 [webpack](https://webpack.js.org/)、[rollup](https://rollupjs.org) 或 [parcel](https://parceljs.org/)。Preact 原生支持它们，无需您做出任何改动！
Expand Down Expand Up @@ -234,7 +192,6 @@ export default {
```

[htm]: https://github.com/developit/htm
[Preact CLI]: https://github.com/preactjs/preact-cli

## 为 preact/compact 配置 TypeScript

Expand Down