Avertissement
preact-cli ne voit malheureusement plus le développement actif! Il est stable afin que vous puissiez compter sur cela pour toutes vos applications existantes, mais pour en créer de nouvelles, nous recommandons VITE via create-preact . Il offre plusieurs des mêmes fonctionnalités mais est une expérience beaucoup plus rapide et plus moderne. Merci à tous les contributeurs et utilisateurs au fil des ans!
Commencez à créer une application Web progressive préalable en quelques secondes
async! préfixeIMPORTANT : Node.js> = v14.14 est requis.
$ npm init preact-cli < template-name > < project-name >
$ yarn create preact-cli < template-name > < project-name >Exemple:
$ npm init preact-cli default my-project La commande ci-dessus tire le modèle de préactjs-Templates / par défaut et génère le projet sur ./my-project/ .
Le but des modèles officiels du projet Preact est de fournir des configurations d'outils de développement d'opinion afin que les utilisateurs puissent démarrer avec le code d'application réel le plus rapidement possible. Cependant, ces modèles ne sont pas opinés en termes de la façon dont vous structurez votre code d'application et des bibliothèques que vous utilisez en plus de Preact.js.
Tous les modèles de projet officiels sont des repos dans l'organisation PREACTJS-Templates. Lorsqu'un nouveau modèle est ajouté à l'organisation, vous pourrez exécuter npm init preact-cli <template-name> <project-name> pour utiliser ce modèle.
Les modèles disponibles actuels comprennent:
par défaut - modèle par défaut avec toutes les fonctionnalités
Simple - la configuration du préact possible la plus simple dans un seul fichier
Modèle CMS Netlify - Netlify Utilisation de Preact
TypeScript - Modèle par défaut implémenté dans TypeScript
Widget - Modèle pour un widget à intégrer dans un autre site Web
Widget-TypeScript - Modèle de widget implémenté dans TypeScript
? Astuce: tout repo github avec un dossier
'template'peut être utilisé comme modèle personnalisé:
npm init preact-cli <username>/<repository> <project-name>
Énumére tous les réactages officiels préactjs-Cli
$ [npm init / yarn create] preact-cli listCréez un projet pour démarrer le développement rapide.
$ [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]
Créer une construction de production
Vous pouvez désactiver la valeur default: true en les préfixant avec --no-<option> ; Par exemple, --no-sw et --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
Tournez un serveur de développement avec plusieurs fonctionnalités comme 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
Note:
HTTPS puis vous pouvez utiliser la HTTPS=true preact watch suivantePORT=8091 preact watch Imprime les informations de débogage concernant l'environnement local.
$ [npm run / yarn] preact info Preact CLI afin de suivre le modèle PRPL rend la route initiale ( / ) vers index.html statique généré.html - Cela garantit que les utilisateurs peuvent voir votre page avant que tout JavaScript soit exécuté, et fournissant ainsi plus rapidement aux utilisateurs des appareils lents ou une mauvaise connexion.
Preact CLI le fait en rendant votre application dans le nœud - cela signifie que nous n'avons pas accès à DOM ou à d'autres variables globales disponibles dans les navigateurs, similaire à la façon dont il serait dans les scénarios de rendu côté serveur. Dans le cas où vous devez compter sur les API du navigateur, vous pourriez:
--no-prerender pour preact build ,if (typeof window !== "undefined") { ... } s'assurer que sur le serveur, ces lignes de code ne sont jamais atteintes. Alternativement, vous pouvez utiliser une bibliothèque d'assistance comme la fenêtre ou le global.Pour faciliter la personnalisation de votre configuration, Preact-CLI prend en charge les plugins. Visitez le Wiki Plugins pour un tutoriel sur la façon de les utiliser.
Vous pouvez personnaliser votre liste de versions de navigateur prise en charge en déclarant une clé "browserslist" dans votre package.json . La modification de ces valeurs modifiera votre sortie JavaScript héritée (via @babel/preset-env ) et votre sortie CSS (via autoprefixer ).
Par défaut, preact-cli émule la configuration suivante:
package.json
{
"browserslist" : [ " > 0.5% " , " last 2 versions " , " Firefox ESR " , " not dead " ]
}Pour personnaliser Babel, vous avez deux options:
Vous pouvez créer un fichier .babelrc dans le répertoire racine de votre projet ou utiliser le chemin --babelConfig pour pointer un fichier de configuration Babel valide. Tous les paramètres que vous définissez ici seront fusionnés dans le préréglage CLI Preact. Par exemple, si vous passez un objet "plugins" contenant différents plugins de ceux déjà utilisés, ils seront simplement ajoutés en haut de la configuration existante. S'il y a des conflits, vous voudrez examiner l'option 2, car la valeur par défaut aura la priorité.
Si vous souhaitez modifier la configuration Babel existante, vous devez utiliser un fichier preact.config.js . Visitez la section WebPack pour plus d'informations, ou consultez l'exemple Personnaliser Babel!
Pour personnaliser la configuration WebPack de Preact-Cli, créez un preact.config.js ou un fichier 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 **/
} ; Voir le wiki des aides de configuration WebPack pour plus d'informations sur l'argument helpers qui contient des méthodes pour trouver différentes parties de la configuration. Voir en outre nos recettes Wiki contenant des exemples sur la façon de modifier la configuration de WebPack.
L'indicateur --prerender ne prétendra par défaut que la racine de votre application. Si vous souhaitez prétendre d'autres itinéraires, vous pouvez créer un fichier prerender-urls.json , qui contient l'ensemble des itinéraires que vous souhaitez rendre. Le format requis pour définir vos itinéraires est un tableau d'objets avec une clé url et une clé title facultative.
prerender-urls.json
[
{
"url" : " / " ,
"title" : " Homepage "
},
{
"url" : " /route/random "
}
] Vous pouvez personnaliser le chemin et / ou le nom de prerender-urls.json en utilisant le drapeau --prerenderUrls .
preact build --prerenderUrls src/prerender-urls.jsonSi un fichier JSON statique est trop restrictif, vous voudrez peut-être fournir un fichier JavaScript qui exporte à la place vos itinéraires. Les routes peuvent être exportées sous forme de chaîne JSON ou d'objet et peuvent éventuellement être renvoyées à partir d'une fonction.
prerender-urls.js
module . exports = [
{
url : '/' ,
title : 'Homepage' ,
} ,
{
url : '/route/random' ,
} ,
] ;
prerender-urls.js
export default ( ) => {
return [
{
url : '/' ,
title : 'Homepage' ,
} ,
{
url : '/route/random' ,
} ,
] ;
} ; Pour personnaliser le document HTML que votre application utilise, modifiez le fichier template.ejs dans le répertoire source de votre application.
EJS est un langage de modèles simple qui vous permet de générer un balisage HTML avec un javascript simple. Aux côtés de html-webpack-plugin , vous êtes en mesure d'ajouter conditionnellement HTML, d'accéder à vos paquets et d'actifs et de lier le contenu externe si vous le souhaitez. La valeur par défaut que nous fournissons sur l'initialisation du projet devrait très bien s'adapter à la majorité des cas d'utilisation, mais n'hésitez pas à personnaliser!
Vous pouvez personnaliser l'emplacement de votre modèle avec l'indicateur --template Template sur les commandes build and watch :
preact build --template renamed-src/template.ejs
preact watch --template template.ejs Les modèles par défaut sont livrés avec un fichier .css pour chaque composant. Vous pouvez commencer à utiliser les préprocesseurs CSS à tout moment pendant le cycle de vie de votre projet en installant des packages supplémentaires, puis en remplaçant simplement ces fichiers .css .
npm install --save-dev sass sass-loader@10 (dans votre dossier d'application Preact).css par des fichiers .scss npm install --save-dev less less-loader@7 (dans votre dossier d'application Preact).css par des fichiers .less Vous pouvez référencer et utiliser n'importe quelle variable d'environnement dans votre application qui a été préfixée avec PREACT_APP_ automatiquement:
src/index.js
console . log ( process . env . PREACT_APP_MY_VARIABLE ) ; Si votre variable n'est pas préfixée, vous pouvez toujours l'ajouter manuellement en utilisant votre preact.config.js (voir la configuration DefinePlugin dans le wiki des recettes).
Il est important de noter que DefinePlugin fait un remplacement de texte direct; il ne rend pas process utilisable. process.env pourrait être un objet vide, mais process.env.PREACT_APP_MY_VARIABLE sera toujours remplacé automatiquement (si une valeur existe).
Vous pouvez définir et stocker des variables à l'aide d'un fichier .env à la racine de votre projet:
.env
PREACT_APP_MY_VARIABLE="my-value"
Vous pouvez également référencer les variables d'environnement dans votre 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 **/
}
} ;Les composants "Route" sont automatiquement assistés par code au moment de la construction pour créer des faisceaux plus petits et éviter de charger plus de code que nécessaire par chaque page. Cela fonctionne en interceptant les importations pour les composants d'itinéraire avec un chargeur asynchrone, qui renvoie un composant en wrapper léger qui gère le code de code de manière transparente.
Le fractionnement automatique du code est appliqué à tous les fichiers JavaScript et TypeScript dans les emplacements suivants:
| Modèle | Exemples |
|---|---|
src / itinéraires / nom | src/routes/home.jssrc/routes/about/index.tsx |
src / composants / routes / nom | src/components/routes/profile.tssrc/components/routes/profile/index.js |
src / composants / async / nom | src/components/async/profile.tssrc/components/async/profile/index.js |
Remarque : le fractionnement automatique du code prend en charge uniquement les exportations par défaut, non nommées exportations:
- import { Profile } from './routes/profile'; + import Profile from './routes/profile';Il s'agit d'une limitation intentionnelle qui garantit une division efficace du code. Pour les composants qui doivent être nommés exportations, placez-les dans un répertoire qui ne déclenche pas la division automatique du code. Vous pouvez ensuite manuellement de coder l'exportation par défaut en la réexpliquant à partir
routes/ou en l'important avec"async!"préfixe.
