警告
不幸的是， preact-cli不再看到積極的發展！它是穩定的，因此您可以依靠它來用於所有現有的應用程序，但是對於創建新應用程序，我們建議通過create-preact Vite。它提供了許多相同的功能，但具有更快，更現代的體驗。多年來，所有貢獻者和用戶都可以！
在幾秒鐘內開始構建一個預先漸進的網絡應用程序
async!前綴重要的是：node.js> = v14.14。
$ npm init preact-cli < template-name > < project-name >
$ yarn create preact-cli < template-name > < project-name >例子：
$ npm init preact-cli default my-project上面的命令從preactjs-templates/default中摘取模板，並在./my-project/ project/上生成項目。
官方提前項目模板的目的是提供自以為是的開發工具設置，以便用戶可以盡快使用實際的應用程序代碼開始。但是，這些模板在構造應用程序代碼以及除了preact.js之外使用的庫中未開放。
所有官方項目模板都是PREACTJS-TEMPLATES組織中的存儲庫。當將新模板添加到組織中時，您將能夠運行npm init preact-cli <template-name> <project-name>使用該模板。
當前可用的模板包括：
默認 - 帶有所有功能的默認模板
簡單 - 單個文件中最簡單的提前設置
NetLify-使用preactct的NetLify CMS模板
Typescript-在打字稿中實現的默認模板
窗口小部件 - 模板，用於嵌入另一個網站中的小部件
窗口小部件類型 - 在打字稿中實現的小部件模板
？提示：任何帶有
'template'文件夾的GitHub存儲庫都可以用作自定義模板：
npm init preact-cli <username>/<repository> <project-name>
列出所有官方的PREACTJS-CLI存儲庫
$ [npm init / yarn create] preact-cli list創建一個快速啟動開發的項目。
$ [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]
創建生產版
您可以通過將它們的前綴加上--no-<option>來禁用default: true標誌;例如， --no-sw和--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
旋轉具有多個功能的開發服務器，例如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
筆記：
HTTPS運行DEV服務器，然後可以使用以下HTTPS=true preact watchPORT=8091 preact watch在其他端口上運行DEV服務器打印有關本地環境的調試信息。
$ [npm run / yarn] preact info為了遵循PRPL模式，請先使用初始路線（ / ）到生成的靜態index.html 。
提前CLI通過在節點內渲染應用程序來實現此目的 - 這意味著我們無法訪問瀏覽器中可用的DOM或其他全局變量，類似於服務器端渲染方案的方式。如果您需要依靠瀏覽器API，則可以：
--no-prerender旗幟掉下來的預先preact build ，if (typeof window !== "undefined") { ... }確保在服務器上無法達到這些代碼行。另外，您可以使用窗口或全球等幫助者庫。為了更輕鬆地自定義配置，PREACTCT-CLI支持插件。訪問插件Wiki，以獲取有關如何使用它們的教程。
您可以通過在package.json中聲明"browserslist"鍵來自定義支持的瀏覽器版本列表。更改這些值將修改您的遺留JavaScript（通過@babel/preset-env ）和CSS（通過autoprefixer ）輸出。
默認情況下， preact-cli模擬以下配置：
package.json
{
"browserslist" : [ " > 0.5% " , " last 2 versions " , " Firefox ESR " , " not dead " ]
}要自定義預告片，您有兩個選擇：
您可以在項目的根目錄中創建.babelrc文件，也可以使用--babelConfig路徑指向任何有效的Babel配置文件。您在此處定義的任何設置都將合併到預先CLI預設中。例如，如果您傳遞包含已使用的插件的"plugins"對象，則將它們簡單地添加到現有配置的頂部。如果有衝突，您將需要研究選項2，因為默認值將優先考慮。
如果您想修改現有的babel配置，則必須使用preact.config.js文件。請訪問Webpack部分以獲取更多信息，或查看自定義Babel示例！
要自定義PREAXCT-CLI的WebPack配置，請創建一個preact.config.js或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 **/
} ;有關helpers參數的更多信息，請參見WebPack配置幫助者Wiki Wiki，其中包含查找配置各個部分的方法。此外，請參閱我們的食譜Wiki，其中包含有關如何更改WebPack配置的示例。
默認情況下， --prerender Flag將僅使用您的應用程序的根。如果要prerender其他路線，則可以創建一個prerender-urls.json文件，其中包含要渲染的路由集。定義路線所需的格式是帶有url鍵和可選title鍵的對像數組。
prerender-urls.json
[
{
"url" : " / " ,
"title" : " Homepage "
},
{
"url" : " /route/random "
}
]您可以使用flag --prerenderUrls自定義prerender-urls.json的路徑和/或名稱。
preact build --prerenderUrls src/prerender-urls.json如果靜態JSON文件過於限制，則可能需要提供一個javaScript文件，以導出路由。路由可以作為JSON字符串或對象導出，並且可以選擇從功能返回。
prerender-urls.js
module . exports = [
{
url : '/' ,
title : 'Homepage' ,
} ,
{
url : '/route/random' ,
} ,
] ;
prerender-urls.js
export default ( ) => {
return [
{
url : '/' ,
title : 'Homepage' ,
} ,
{
url : '/route/random' ,
} ,
] ;
} ; 要自定義應用程序使用的HTML文檔，請在應用程序源目錄中編輯template.ejs文件。
EJS是一種簡單的模板語言，可讓您使用普通JavaScript生成HTML標記。除了html-webpack-plugin之外，您還可以有條件地添加HTML，訪問捆綁包和資產，並根據需要鏈接到外部內容。我們在項目初始化方面提供的默認值應該非常適合大多數用例，但可以隨意自定義！
您可以在build和watch命令上使用--template標誌自定義模板的位置：
preact build --template renamed-src/template.ejs
preact watch --template template.ejs默認模板帶有每個組件的.css文件。您可以在項目生命週期期間的任何給定時間開始使用CSS預處理器，然後安裝其他軟件包，然後簡單地替換這些.css文件。
npm install --save-dev sass sass-loader@10 （在您的preact應用程序文件夾中）.css文件替換.scss文件npm install --save-dev less less-loader@7 （在您的preact應用程序文件夾中）.css文件替換.less文件您可以在應用程序中引用並使用已在PREACT_APP_前綴_的應用程序中自動引用的任何環境變量：
src/index.js
console . log ( process . env . PREACT_APP_MY_VARIABLE ) ;如果您的變量沒有前綴，則仍然可以使用preact.config.js手動添加它（請參閱配方Wiki中的DefinePlugin Config）。
重要的是要注意， DefinePlugin可以直接更換文本。它不能使process可用。 process.env可能是一個空的對象，但是process.env.PREACT_APP_MY_VARIABLE仍將自動更換（如果存在值）。
您可以在項目根部使用.env文件設置和存儲變量：
.env
PREACT_APP_MY_VARIABLE="my-value"
您還可以在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 **/
}
} ;“路由”組件會在構建時間自動切換，以創建較小的捆綁包，並避免加載比每個頁面所需的更多代碼。這是通過使用異步加載程序攔截路由組件的導入來起作用的，該加載程序返回了輕巧的包裝器組件，該組件可以無縫地處理代碼。
自動代碼拆分應用於以下位置的所有JavaScript和Typescript文件：
| 圖案 | 例子 |
|---|---|
SRC /路線/名稱 | src/routes/home.jssrc/routes/about/index.tsx |
SRC/組件/路線/名稱 | src/components/routes/profile.tssrc/components/routes/profile/index.js |
SRC/組件/異步/名稱 | src/components/async/profile.tssrc/components/async/profile/index.js |
注意：自動代碼拆分僅支持默認導出，未命名導出：
- import { Profile } from './routes/profile'; + import Profile from './routes/profile';這是一個有意識的限制，可確保有效的代碼分裂。對於需要命名導出的組件，將它們放入不會觸發自動代碼分裂的目錄中。然後，您可以通過將默認導出從
routes/重新出口或用"async!"導入該默認導出來手動代碼分解默認導出。前綴。
