Aviso
Infelizmente, preact-cli não vê mais o desenvolvimento ativo! É estável para que você possa confiar nele para todos os seus aplicativos existentes, mas para criar novos, recomendamos o Vite via create-preact . Oferece muitos dos mesmos recursos, mas é uma experiência muito mais rápida e moderna. Obrigado a todos os colaboradores e usuários ao longo dos anos!
Comece a construir um aplicativo preta progressivo da Web em segundos
async! prefixoImportante : Node.js> = v14.14 é necessário.
$ npm init preact-cli < template-name > < project-name >
$ yarn create preact-cli < template-name > < project-name >Exemplo:
$ npm init preact-cli default my-project O comando acima extrai o modelo de preactjs-templates/padrão e gera o projeto em ./my-project/ .
O objetivo dos modelos oficiais do projeto PREACT é fornecer configurações opinativas de ferramentas de desenvolvimento para que os usuários possam começar o código do aplicativo real o mais rápido possível. No entanto, esses modelos não são opinados em termos de como você estrutura o código do seu aplicativo e quais bibliotecas você usa, além do preact.js.
Todos os modelos oficiais do projeto são repositórios na organização PREACTJS-TEMPLATES. Quando um novo modelo for adicionado à organização, você poderá executar npm init preact-cli <template-name> <project-name> para usar esse modelo.
Os modelos atuais disponíveis incluem:
Modelo padrão - padrão com todos os recursos
Simples - a configuração preta mais simples possível em um único arquivo
NETLIFY - Modelo Netlify CMS usando preact
TypeScript - Modelo padrão implementado no TypeScript
Widget - modelo para um widget a ser incorporado em outro site
Modelo de Widget -TypeScript - Widget implementado no TypeScript
? Dica: qualquer repo Github com uma pasta
'template'pode ser usada como um modelo personalizado:
npm init preact-cli <username>/<repository> <project-name>
Lista todos os repositórios oficiais do PreactJS-Cli
$ [npm init / yarn create] preact-cli listCrie um projeto para o desenvolvimento rápido do início.
$ [npm init / yarn create] preact-cli <template-name> <project-name>
--name The application name.
--cwd A directory to use instead of $PWD.
--force Force option to create the directory for the new app [boolean] [default: false]
--git Initialize version control using git. [boolean] [default: false]
--install Installs dependencies. [boolean] [default: true]
Crie uma construção de produção
Você pode desativar default: true prefixando-os com --no-<option> ; Por exemplo, --no-sw e --no-prerender .
$ [npm run / yarn] preact build
--src Specify source directory (default src)
--dest Specify output directory (default build)
--cwd A directory to use instead of $PWD (default .)
--sw Generate and attach a Service Worker (default true)
--babelConfig Path to custom Babel config (default .babelrc)
--prerender Renders route(s) into generated static HTML (default true)
--prerenderUrls Path to pre-rendered routes config (default prerender-urls.json)
--template Path to custom EJS or HTML template (default 'src/template.ejs')
--analyze Launch interactive Analyzer to inspect production bundle(s) (default false)
-c, --config Path to custom CLI config (default preact.config.js)
-v, --verbose Verbose output
-h, --help Displays this message
Spin um servidor de desenvolvimento com vários recursos, como hot-module-replacement , module-watcher
$ [npm run / yarn] preact watch
--src Specify source directory (default src)
--cwd A directory to use instead of $PWD (default .)
--clear Clear the console (default true)
--sw Generate and attach a Service Worker (default false)
--babelConfig Path to custom Babel config (default .babelrc)
--https Run server with HTTPS protocol
--key Path to PEM key for custom SSL certificate
--cert Path to custom SSL certificate
--cacert Path to optional CA certificate override
--prerender Pre-render static content on first run
--prerenderUrls Path to pre-rendered routes config (default prerender-urls.json)
--template Path to custom EJS or HTML template (default 'src/template.ejs')
--refresh Enables experimental preact-refresh functionality
-c, --config Path to custom CLI config (default preact.config.js)
-H, --host Set server hostname (default 0.0.0.0)
-p, --port Set server port (default 8080)
-h, --help Displays this message
Observação:
HTTPS , então você pode usar o seguinte HTTPS=true preact watchPORT=8091 preact watch Imprime as informações de depuração sobre o ambiente local.
$ [npm run / yarn] preact info O PREACT CLI para seguir o PRPL Pattern renderiza a rota inicial ( / ) no index.html estático gerado.html - isso garante que os usuários vejam sua página antes que qualquer JavaScript seja executado e, assim, fornece aos usuários dispositivos lentos ou de baixa conexão do seu site muito mais rápido.
O PREACT CLI faz isso renderizando seu aplicativo dentro do nó - isso significa que não temos acesso a DOM ou a outras variáveis globais disponíveis nos navegadores, semelhante ao que seria em cenários de renderização do lado do servidor. Caso você precise confiar nas APIs do navegador que pode:
--no-prerender a bandeira para preact build ,if (typeof window !== "undefined") { ... } Garantir que nas linhas de código do servidor nunca sejam alcançadas. Como alternativa, você pode usar uma biblioteca ajudante como a janela ou global.Para facilitar a personalização da sua configuração, o Preact-Cli suporta plugins. Visite o plug -ins Wiki para obter um tutorial sobre como usá -los.
Você pode personalizar sua lista de versões do navegador suportadas, declarando uma chave "browserslist" no seu package.json . A alteração desses valores modificará o seu legado JavaScript (via @babel/preset-env ) e sua saída CSS (via autoprefixer ).
Por padrão, preact-cli emula a seguinte configuração:
package.json
{
"browserslist" : [ " > 0.5% " , " last 2 versions " , " Firefox ESR " , " not dead " ]
}Para personalizar Babel, você tem duas opções:
Você pode criar um arquivo .babelrc no diretório raiz do seu projeto ou usar o caminho --babelConfig para apontar em qualquer arquivo de configuração Babel válido. Quaisquer configurações que você definir aqui serão mescladas na predefinição preta da CLI. Por exemplo, se você passar por um objeto "plugins" que contém plugins diferentes daqueles que já estão em uso, eles serão simplesmente adicionados à parte superior da configuração existente. Se houver conflitos, você deseja analisar a opção 2, pois o padrão terá precedência.
Se você deseja modificar a configuração Babel existente, deve usar um arquivo preact.config.js . Visite a seção Webpack para obter mais informações ou confira o exemplo de Babel personalizado!
Para personalizar a configuração Webpack do Preact-Cli, crie um arquivo preact.config.js ou um arquivo preact.config.json :
preact.config.js
// ... imports or other code up here ...
/**
* Function that mutates the original webpack config.
* Supports asynchronous changes when a promise is returned (or it's an async function).
*
* @param {import('preact-cli').Config} config - original webpack config
* @param {import('preact-cli').Env} env - current environment and options pass to the CLI
* @param {import('preact-cli').Helpers} helpers - object with useful helpers for working with the webpack config
* @param {Record<string, unknown>} options - this is mainly relevant for plugins (will always be empty in the config), default to an empty object
*/
export default ( config , env , helpers , options ) => {
/** you can change the config here **/
} ; Consulte o Webpack Config Helpers Wiki para obter mais informações sobre o argumento helpers , que contém métodos para encontrar várias partes da configuração. Além disso, consulte nossas receitas contendo exemplos sobre como alterar a configuração do WebPack.
O sinalizador --prerender prenderá por padrão apenas a raiz do seu aplicativo. Se você deseja pré-render outras rotas, pode criar um arquivo prerender-urls.json , que contém o conjunto de rotas que deseja renderizar. O formato necessário para definir suas rotas é uma variedade de objetos com uma chave de url e uma chave title opcional.
prerender-urls.json
[
{
"url" : " / " ,
"title" : " Homepage "
},
{
"url" : " /route/random "
}
] Você pode personalizar o caminho e/ou o nome de prerender-urls.json usando o sinalizador --prerenderUrls .
preact build --prerenderUrls src/prerender-urls.jsonSe um arquivo JSON estático for muito restritivo, convém fornecer um arquivo JavaScript que exporte suas rotas. As rotas podem ser exportadas como uma string json ou um objeto e, opcionalmente, podem ser retornadas de uma função.
prerender-urls.js
module . exports = [
{
url : '/' ,
title : 'Homepage' ,
} ,
{
url : '/route/random' ,
} ,
] ;
prerender-urls.js
export default ( ) => {
return [
{
url : '/' ,
title : 'Homepage' ,
} ,
{
url : '/route/random' ,
} ,
] ;
} ; Para personalizar o documento HTML que seu aplicativo usa, edite o arquivo template.ejs no diretório de origem do seu aplicativo.
O EJS é uma linguagem simples de modelos que permite gerar marcação HTML com JavaScript simples. Juntamente com html-webpack-plugin , você pode adicionar condicionalmente HTML, acessar seus pacotes e ativos e vincular o conteúdo externo, se desejar. O padrão que fornecemos na inicialização do projeto deve se encaixar muito bem na maioria dos casos de uso, mas sinta -se à vontade para personalizar!
Você pode personalizar a localização do seu modelo com o sinalizador --template nos comandos build and watch :
preact build --template renamed-src/template.ejs
preact watch --template template.ejs Os modelos padrão vêm com um arquivo .css para cada componente. Você pode começar a usar os pré -processadores CSS a qualquer momento durante o ciclo de vida do seu projeto, instalando pacotes adicionais e simplesmente substituindo esses arquivos .css .
npm install --save-dev sass sass-loader@10 (dentro da sua pasta de aplicativos PREACT).css por arquivos .scss npm install --save-dev less less-loader@7 (dentro da sua pasta de aplicativos PREACT).css por arquivos .less Você pode fazer referência e usar qualquer variável de ambiente em seu aplicativo que tenha sido prefixado com PREACT_APP_ automaticamente:
src/index.js
console . log ( process . env . PREACT_APP_MY_VARIABLE ) ; Se sua variável não for prefixada, você ainda poderá adicioná -la manualmente usando seu preact.config.js (consulte Defineplugin Config no wiki das receitas).
É importante observar que DefinePlugin direta a substituição de texto; Não torna process utilizável. process.env pode ser um objeto vazio, mas process.env.PREACT_APP_MY_VARIABLE ainda será substituído automaticamente (se houver um valor).
Você pode definir e armazenar variáveis usando um arquivo .env na raiz do seu projeto:
.env
PREACT_APP_MY_VARIABLE="my-value"
Você também pode referenciar variáveis de ambiente em seu preact.config.js :
export default ( config , env , helpers , options ) => {
if ( process . env . MY_VARIABLE ) {
/** You can add a config here that will only used when your variable is truthy **/
}
} ;Os componentes de "rota" são automaticamente splitados de código no momento da construção para criar pacotes menores e evitar carregar mais código do que é necessário em cada página. Isso funciona interceptando importações para componentes de rota com um carregador assíncrono, que retorna um componente de wrapper leve que lida com o código que se divide sem problemas.
A divisão automática de código é aplicada a todos os arquivos JavaScript e TypeScript nos seguintes locais:
| Padrão | Exemplos |
|---|---|
src / rotas / nome | src/routes/home.jssrc/routes/about/index.tsx |
src/ componentes/ rotas / nome | src/components/routes/profile.tssrc/components/routes/profile/index.js |
src/ componentes/ assync / nome | src/components/async/profile.tssrc/components/async/profile/index.js |
Nota : A divisão automática de código suporta apenas exportações padrão, não nomeadas exportações:
- import { Profile } from './routes/profile'; + import Profile from './routes/profile';Essa é uma limitação intencional que garante uma divisão efetiva do código. Para componentes que precisam de exportação nomeados, coloque -os em um diretório que não aciona a divisão automática de código. Em seguida, você pode dividir manualmente a exportação padrão reexportando-a de
routes/ou importando-a com o"async!"prefixo.
