Warnung
preact-cli sieht leider keine aktive Entwicklung mehr! Es ist stabil, sodass Sie sich für alle Ihre vorhandenen Apps darauf verlassen können, aber zum Erstellen neuer, empfehlen wir Vite per create-preact . Es bietet viele der gleichen Funktionen, ist aber viel schneller und moderner. Vielen Dank an alle Mitwirkenden und Benutzer im Laufe der Jahre!
Erstellen Sie eine Preact Progressive Web App in Sekunden
async! PräfixWichtig : node.js> = v14.14 ist erforderlich.
$ npm init preact-cli < template-name > < project-name >
$ yarn create preact-cli < template-name > < project-name >Beispiel:
$ npm init preact-cli default my-project Der obige Befehl zieht die Vorlage von Preactjs-Templates/Standard und generiert das Projekt unter ./my-project/ .
Der Zweck der offiziellen Preact -Projektvorlagen besteht darin, auf Setups mit Meinungsentwicklungs -Tools für die Entwicklung von Tools zur Verfügung zu stehen, damit Benutzer so schnell wie möglich mit dem tatsächlichen App -Code beginnen können. Diese Vorlagen sind jedoch nicht optimiert, wie Sie Ihren App-Code strukturieren und welche Bibliotheken Sie zusätzlich zu Preact.js verwenden.
Alle offiziellen Projektvorlagen sind Repos in der Preactjs-Templates-Organisation. Wenn der Organisation eine neue Vorlage hinzugefügt wird, können Sie npm init preact-cli <template-name> <project-name> ausführen, um diese Vorlage zu verwenden.
Zu den aktuellen verfügbaren Vorlagen gehören:
Standard - Standardvorlage mit allen Funktionen
Einfach - das einfachste mögliche Preact -Setup in einer einzelnen Datei
Netlify - Netlify CMS -Vorlage mit Preact
TypeScript - Standardvorlage in TypeScript implementiert
Widget - Vorlage für ein Widget, das in eine andere Website eingebettet werden kann
Widget -Typescript - Widget -Vorlage in TypeScript implementiert
? Tipp: Jeder GitHub -Repo mit einem
'template'-Ordner kann als benutzerdefinierte Vorlage verwendet werden:
npm init preact-cli <username>/<repository> <project-name>
Listet alle offiziellen Preactjs-Cli-Repositories auf
$ [npm init / yarn create] preact-cli listErstellen Sie ein Projekt, um schnell zu starten.
$ [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]
Erstellen Sie einen Produktionsbau
Sie können default: true Flags, indem Sie sie mit --no-<option> ; Zum Beispiel --no-sw und --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
Sprühen Sie einen Entwicklungsserver mit mehreren Funktionen wie 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
Notiz:
HTTPS ausführen und dann die folgenden HTTPS=true preact watch verwendenPORT=8091 preact watch können Sie den Dev -Server auf einem anderen Port ausführen Drucke Debugging -Informationen über die lokale Umgebung.
$ [npm run / yarn] preact info PREACT CLI Um PRPL -Muster zu befolgen, wird die erste Route ( / ) in generiertes statisches index.html verwandelt - Dies stellt sicher, dass Benutzer Ihre Seite sehen, bevor ein JavaScript ausgeführt wird, und so die Benutzer mit langsamen Geräten oder schlechten Verbindung den Inhalt Ihrer Website viel schneller zur Verfügung stellen.
Preact CLI erledigt dies, indem Sie Ihre App im Knoten rendern. Dies bedeutet, dass wir keinen Zugriff auf DOM oder andere globale Variablen haben, die in Browsern verfügbar sind, ähnlich wie in serverseitigen Rendering -Szenarien. Falls Sie sich auf Browser -APIs verlassen müssen, könnten Sie:
--no-prerender Fahne, um die Flagge für preact build ,if (typeof window !== "undefined") { ... } Alternativ können Sie eine Helferbibliothek wie Fenster oder Global verwenden.Um Ihre Konfiguration zu vereinfachen, unterstützt Preact-CLI Plugins. Besuchen Sie das Plugins -Wiki, um ein Tutorial zur Verwendung zu erhalten.
Sie können Ihre Liste der unterstützten Browser -Versionen anpassen, indem Sie in Ihrem Paket einen "browserslist" -Taste in Ihrem package.json deklarieren. Durch das Ändern dieser Werte wird Ihr älteres JavaScript (über @babel/preset-env ) und Ihre CSS (über autoprefixer ) ausgeführt.
Standardmäßig emuliert preact-cli die folgende Konfiguration:
package.json
{
"browserslist" : [ " > 0.5% " , " last 2 versions " , " Firefox ESR " , " not dead " ]
}Um Babel anzupassen, haben Sie zwei Optionen:
Sie können eine .babelrc -Datei im Root -Verzeichnis Ihres Projekts erstellen oder den Pfad --babelConfig verwenden, um auf eine gültige Babel -Konfigurationsdatei zu zeigen. Alle Einstellungen, die Sie hier definieren, werden in das Preact CLI Preset zusammengeführt. Wenn Sie beispielsweise ein "plugins" -Objekt übergeben, das verschiedene Plugins von den bereits verwendeten Personen enthält, werden sie einfach über die vorhandene Konfiguration hinzugefügt. Wenn es Konflikte gibt, sollten Sie sich mit Option 2 befassen, da der Standard Vorrang hat.
Wenn Sie die vorhandene Babel -Konfiguration ändern möchten, müssen Sie eine Datei preact.config.js verwenden. Besuchen Sie den Abschnitt Webpack, um weitere Informationen zu erhalten, oder besuchen Sie das Beispiel für anpassen Babel!
So erstellen Sie eine Webpack-Konfiguration von Preact-Cli, erstellen Sie eine Datei preact.config.js oder eine preact.config.json Datei:
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 **/
} ; Weitere Informationen zum helpers -Argument finden Sie unter WebPack -Konfigurationshelpern Wiki, die Methoden enthält, um verschiedene Teile der Konfiguration zu finden. Sehen Sie zusätzlich unser Rezepte Wiki mit Beispielen zur Änderung der Webpack -Konfiguration.
Das Flag --prerender wird standardmäßig nur das Stamm Ihrer Anwendung vorstellen. Wenn Sie andere Routen vorbereiten möchten, können Sie eine prerender-urls.json Datei erstellen, die die Set von Routen enthält, die Sie rendern möchten. Das zum Definieren Ihrer Routen erforderliche Format ist eine Reihe von Objekten mit einer url -Taste und einer optionalen title .
prerender-urls.json
[
{
"url" : " / " ,
"title" : " Homepage "
},
{
"url" : " /route/random "
}
] Sie können den Pfad und/oder den Namen von prerender-urls.json mithilfe der Flagge --prerenderUrls anpassen.
preact build --prerenderUrls src/prerender-urls.jsonWenn eine statische JSON -Datei zu restriktiv ist, möchten Sie möglicherweise eine JavaScript -Datei bereitstellen, die stattdessen Ihre Routen exportiert. Routen können als JSON -Zeichenfolge oder als Objekt exportiert werden und optional von einer Funktion zurückgegeben werden.
prerender-urls.js
module . exports = [
{
url : '/' ,
title : 'Homepage' ,
} ,
{
url : '/route/random' ,
} ,
] ;
prerender-urls.js
export default ( ) => {
return [
{
url : '/' ,
title : 'Homepage' ,
} ,
{
url : '/route/random' ,
} ,
] ;
} ; Um das HTML -Dokument anzupassen, das Ihre App verwendet, bearbeiten Sie die Datei template.ejs im Quellverzeichnis Ihrer App.
EJS ist eine einfache Vorlagensprache, mit der Sie HTML -Markup mit einfachem JavaScript generieren können. Neben html-webpack-plugin können Sie HTML bedingt hinzufügen, auf Ihre Bundles und Assets zugreifen und zu einem externen Inhalt verlinken, wenn Sie dies wünschen. Die Standardeinstellung, die wir bei der Projektinitialisierung angeben, sollte die meisten Anwendungsfälle sehr gut passen, aber Sie können gerne anpassen!
Sie können den Standort Ihrer Vorlage mit dem Flag --template -Flag auf die Befehle build und watch :
preact build --template renamed-src/template.ejs
preact watch --template template.ejs Die Standardvorlagen werden für jede Komponente mit einer .css -Datei geliefert. Sie können CSS -Präprozessoren zu einem bestimmten Zeitpunkt während Ihres Projektlebenszyklus verwenden, indem Sie zusätzliche Pakete installieren und diese .css -Dateien dann einfach ersetzen.
npm install --save-dev sass sass-loader@10 (in Ihrem Vorwirkungsordner).css -Dateien durch .scss -Dateien npm install --save-dev less less-loader@7 (in Ihrem Vordrückungs-Anwendungsordner).css -Dateien durch .less -Dateien Sie können jede Umgebungsvariable in Ihrer Anwendung verweisen und verwenden, die automatisch mit PREACT_APP_ vorangestellt wurde:
src/index.js
console . log ( process . env . PREACT_APP_MY_VARIABLE ) ; Wenn Ihre Variable nicht vorangestellt ist, können Sie sie immer noch manuell mit Ihren preact.config.js hinzufügen (siehe Defineplugin -Konfiguration im Rezepte Wiki).
Es ist wichtig zu beachten, dass DefinePlugin direkten Textersatz durchführt. Es macht process nicht verwendbar. process.env könnte ein leeres Objekt sein, aber process.env.PREACT_APP_MY_VARIABLE wird weiterhin automatisch ersetzt (falls ein Wert besteht).
Sie können Variablen mithilfe einer .env -Datei im Root Ihres Projekts einstellen und speichern:
.env
PREACT_APP_MY_VARIABLE="my-value"
Sie können auch die Umgebungsvariablen in Ihrem preact.config.js verweisen:
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 **/
}
} ;"Route" -Komponenten werden automatisch zum Erstellen von kleineren Bündeln mit Code versetzt, um kleinere Bündel zu erstellen und mehr Code zu laden als von jeder Seite benötigt. Dies erfolgt durch Abfangen von Importen für Routenkomponenten mit einem Async -Loader, der eine leichte Wrapper -Komponente zurückgibt, die die Code -Spaltung nahtlos behandelt.
Die automatische Codeaufteilung wird an den folgenden Stellen auf alle JavaScript- und Typscript -Dateien angewendet:
| Muster | Beispiele |
|---|---|
SRC / Routen / Name | src/routes/home.jssrc/routes/about/index.tsx |
SRC/ Komponenten/ Routen / Name | src/components/routes/profile.tssrc/components/routes/profile/index.js |
src/ components/ async / name | src/components/async/profile.tssrc/components/async/profile/index.js |
Hinweis : Die automatische Code -Aufteilung unterstützt nur Standard -Exporte, nicht als Exporte mit dem Namen:
- import { Profile } from './routes/profile'; + import Profile from './routes/profile';Dies ist eine absichtliche Einschränkung, die eine effektive Codespaltung gewährleistet. Platzieren Sie für Komponenten, die benannte Exporte benötigen, in ein Verzeichnis, das keine automatische Codespaltung auslöst. Sie können dann den Standard-Export manuell codieren, indem Sie ihn von
routes/oder importieren, wenn Sie ihn mit dem"async!"Importieren! Präfix.
