警告
不幸的是， 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!"导入该默认导出来手动代码分解默认导出。前缀。
