Advertencia
preact-cli desafortunadamente ya no ve el desarrollo activo! Es estable para que pueda confiar en ella para todas sus aplicaciones existentes, pero para crear otras nuevas, recomendamos VITE a través de create-preact . Ofrece muchas de las mismas características, pero es una experiencia mucho más rápida y moderna. ¡Gracias a todos los contribuyentes y usuarios a lo largo de los años!
Comience a construir una aplicación web progresiva preactante en segundos
async! prefijoImportante : se requiere Node.js> = V14.14.
$ npm init preact-cli < template-name > < project-name >
$ yarn create preact-cli < template-name > < project-name >Ejemplo:
$ npm init preact-cli default my-project El comando anterior extrae la plantilla de preactjs-templates/default y genera el proyecto en ./my-project/ .
El propósito de las plantillas oficiales del proyecto PREACT es proporcionar configuraciones de herramientas de desarrollo obstinadas para que los usuarios puedan comenzar con el código de la aplicación real lo más rápido posible. Sin embargo, estas plantillas no se optimizan en términos de cómo estructura el código de su aplicación y qué bibliotecas usa además de preact.js.
Todas las plantillas oficiales de proyectos son repositorios en la organización PreactJS-Templates. Cuando se agrega una nueva plantilla a la organización, podrá ejecutar npm init preact-cli <template-name> <project-name> para usar esa plantilla.
Las plantillas disponibles actuales incluyen:
Predeterminado: plantilla predeterminada con todas las funciones
Simple: la configuración de preactación más simple posible en un solo archivo
NetLify - Netlify Plantilla CMS usando Preact
TypeScript: plantilla predeterminada implementada en TypeScript
widget: plantilla para que un widget se incruste en otro sitio web
widget -typescript - plantilla de widget implementada en TypeScript
? Consejo: Cualquier repositorio de GitHub con una carpeta
'template'se puede usar como una plantilla personalizada:
npm init preact-cli <username>/<repository> <project-name>
Enumera todos los repositorios oficiales de preactjs-cli
$ [npm init / yarn create] preact-cli listCree un proyecto para comenzar rápido el desarrollo.
$ [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]
Crear una construcción de producción
Puede deshabilitar default: true mediante el prefijo con --no-<option> ; Por ejemplo, --no-sw y --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
Gire un servidor de desarrollo con múltiples características 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
Nota:
HTTPS entonces puede usar el siguiente HTTPS=true preact watchPORT=8091 preact watch Imprime información de depuración sobre el entorno local.
$ [npm run / yarn] preact info PREACT CLI Para seguir PRPL Pattern hace que la ruta inicial ( / ) en index.html estático generado.html: esto garantice que los usuarios puedan ver su página antes de que se ejecute JavaScript y, por lo tanto, proporcionando a los usuarios dispositivos lentos o una conexión de maldad de su sitio web mucho más rápido.
Preact CLI hace esto al representar su aplicación Inside Node: esto significa que no tenemos acceso a DOM u otras variables globales disponibles en los navegadores, similar cómo sería en escenarios de representación del lado del servidor. En caso de que necesite confiar en las API del navegador, podría:
--no-prerender la bandera para preact build ,if (typeof window !== "undefined") { ... } Asegurando que en el servidor nunca se alcancen esas líneas de código. Alternativamente, puede usar una biblioteca de ayuda como Window-Olbal.Para facilitar la personalización de su configuración, PREACT-CLI admite complementos. Visite la wiki de los complementos para obtener un tutorial sobre cómo usarlos.
Puede personalizar su lista de versiones compatibles con el navegador declarando una tecla "browserslist" dentro de su package.json . Cambiar estos valores modificará su Legacy JavaScript (a través de @babel/preset-env ) y su salida CSS (a través de autoprefixer ).
Por defecto, preact-cli emula la siguiente configuración:
package.json
{
"browserslist" : [ " > 0.5% " , " last 2 versions " , " Firefox ESR " , " not dead " ]
}Para personalizar a Babel, tienes dos opciones:
Puede crear un archivo .babelrc en el directorio raíz de su proyecto, o usar la ruta --babelConfig para apuntar en cualquier archivo de configuración Babel válido. Cualquier configuración que defina aquí se fusionará en el preajuste Preset PREACT. Por ejemplo, si pasa un objeto "plugins" que contiene diferentes complementos de los que ya están en uso, simplemente se agregarán encima de la configuración existente. Si hay conflictos, querrá analizar la opción 2, ya que el valor predeterminado tendrá prioridad.
Si desea modificar la configuración Babel existente, debe usar un archivo preact.config.js . ¡Visite la sección Webpack para obtener más información o consulte el ejemplo de personalización de Babel!
Para personalizar la configuración de Webpack de Preact-CLI, cree un archivo preact.config.js o 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 WIKI WIKI de configuración de Webpack para obtener más información sobre el argumento de helpers que contiene métodos para encontrar varias partes de la configuración. Además, vea nuestras recetas Wiki que contiene ejemplos sobre cómo cambiar la configuración de Webpack.
El indicador --prerender será prerender de forma predeterminada solo la raíz de su aplicación. Si desea prerender otras rutas, puede crear un archivo prerender-urls.json , que contiene el conjunto de rutas que desea representar. El formato requerido para definir sus rutas es una variedad de objetos con una clave url y una clave title opcional.
prerender-urls.json
[
{
"url" : " / " ,
"title" : " Homepage "
},
{
"url" : " /route/random "
}
] Puede personalizar la ruta y/o el nombre de prerender-urls.json utilizando el flag --prerenderUrls .
preact build --prerenderUrls src/prerender-urls.jsonSi un archivo JSON estático es demasiado restrictivo, es posible que desee proporcionar un archivo JavaScript que exporte sus rutas. Las rutas se pueden exportar como una cadena JSON o un objeto y opcionalmente se puede devolver desde una función.
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 el documento HTML que utiliza su aplicación, edite el archivo template.ejs en el directorio de origen de su aplicación.
EJS es un lenguaje de plantilla simple que le permite generar marcado HTML con JavaScript simple. Junto con html-webpack-plugin , puede agregar condicionalmente HTML, acceder a sus paquetes y activos y vincular al contenido externo si lo desea. El valor predeterminado que proporcionamos en la inicialización del proyecto debe adaptarse muy bien a la mayoría de los casos de uso, ¡pero no dude en personalizar!
Puede personalizar la ubicación de su plantilla con el indicador --template en los comandos build y watch :
preact build --template renamed-src/template.ejs
preact watch --template template.ejs Las plantillas predeterminadas vienen con un archivo .css para cada componente. Puede comenzar a usar preprocesadores CSS en cualquier momento dado durante el ciclo de vida de su proyecto instalando paquetes adicionales y luego simplemente reemplazando esos archivos .css .
npm install --save-dev sass sass-loader@10 (dentro de su carpeta de aplicación Preact).css con archivos .scss npm install --save-dev less less-loader@7 (dentro de su carpeta de aplicación Preact).css con archivos .less Puede hacer referencia y utilizar cualquier variable de entorno en su aplicación que haya sido prefijada con PREACT_APP_ automáticamente:
src/index.js
console . log ( process . env . PREACT_APP_MY_VARIABLE ) ; Si su variable no tiene prefijo, aún puede agregarla manualmente utilizando su preact.config.js (consulte DefinePlugin Config en la wiki de las recetas).
Es importante tener en cuenta que DefinePlugin hace reemplazo de texto directo; No hace que process sea utilizable. process.env podría ser un objeto vacío, pero process.env.PREACT_APP_MY_VARIABLE aún se reemplazará automáticamente (si existe un valor).
Puede establecer y almacenar variables utilizando un archivo .env en la raíz de su proyecto:
.env
PREACT_APP_MY_VARIABLE="my-value"
También puede hacer referencia a variables de entorno en su 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 **/
}
} ;Los componentes de "ruta" se dividen automáticamente en el momento de la compilación para crear paquetes más pequeños y evitar cargar más código del que necesita cada página. Esto funciona interceptando las importaciones para los componentes de ruta con un cargador async, que devuelve un componente de envoltorio liviano que maneja el código que se divide sin problemas.
La división de código automático se aplica a todos los archivos JavaScript y TypeScript en las siguientes ubicaciones:
| Patrón | Ejemplos |
|---|---|
src / rutas / nombre | src/routes/home.jssrc/routes/about/index.tsx |
src/ componentes/ rutas / nombre | src/components/routes/profile.tssrc/components/routes/profile/index.js |
src/ componentes/ async / nombre | src/components/async/profile.tssrc/components/async/profile/index.js |
Nota : La división automática de código solo admite exportaciones predeterminadas, no nombradas exportaciones:
- import { Profile } from './routes/profile'; + import Profile from './routes/profile';Esta es una limitación intencional que garantiza la división efectiva del código. Para los componentes que necesitan exportaciones nombradas, colóquelas en un directorio que no active la división de código automático. Luego puede dividir manualmente la exportación predeterminada reexportándola de
routes/o importándola con el"async!"prefijo.
