警告
残念ながら、 preact-cli積極的な開発をもう見ていません！安定しているので、既存のすべてのアプリに頼ることができますが、新しいアプリを作成するには、 create-preactを介してViteをお勧めします。同じ機能の多くを提供しますが、はるかに高速でモダンな体験です。長年にわたってすべての貢献者とユーザーに感謝します！
事前に進行性のWebアプリの構築を数秒で開始します
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 -Netlify CMSテンプレートを使用して
TypeScript-タイプスクリプトに実装されたデフォルトのテンプレート
ウィジェット - 別のウェブサイトにウィジェットを埋め込むテンプレート
Widget -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]
制作ビルドを作成します
default: trueフラグは--no-<option>をプレフィックスすることで;たとえば、 --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を使用して開発者サーバーを実行できます。次のHTTPS=true preact watchを使用できますPORT=8091 preact watchを使用して、別のポートでDEVサーバーを実行できますローカル環境に関する情報のデバッグ情報を印刷します。
$ [npm run / yarn] preact infoPRPLパターンをフォローするためのPREACT CLIは、初期ルート（ / ）を生成されたStatic index.htmlにレンダリングします。これにより、JavaScriptが実行される前にユーザーがページを表示し、ユーザーにウェブサイトのコンテンツをより速く接続することができないことを保証します。
PREACT CLIは、ノード内でアプリをレンダリングすることでこれを行います。これは、ブラウザで利用可能なDOMまたは他のグローバル変数にアクセスできないことを意味します。ブラウザAPIに依存する必要がある場合は、次のことができます。
--no-prerenderフラグはpreact buildになりません、if (typeof window !== "undefined") { ... }条件付きステートメントでブラウザのAPIを必要とするコードをラッピングすることにより、サーバー側のレンダリングをサポートする方法でコードを書きます。または、Window-Or-Globalなどのヘルパーライブラリを使用できます。構成のカスタマイズを容易にするために、PREACT-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 " ]
}Babelをカスタマイズするには、2つのオプションがあります。
プロジェクトのルートディレクトリに.babelrcファイルを作成するか、有効なBabel構成ファイルをポイントする--babelConfigパスを使用する場合があります。ここで定義する設定はすべて、PREACT CLIプリセットにマージされます。たとえば、既に使用されているプラグインと異なるプラグインを含む"plugins"オブジェクトを渡すと、既存の構成の上に追加されます。競合がある場合は、デフォルトが優先されるため、オプション2を調べる必要があります。
既存のBABEL構成を変更する場合は、 preact.config.jsファイルを使用する必要があります。詳細については、Webpackセクションにアクセスするか、カスタマイズBabelの例をご覧ください。
Preact-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 Config Helpers Wikiを参照してください。さらに、Webpack構成を変更する方法に関する例を含むWikiを含むレシピを参照してください。
--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は、Plain 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 applicationフォルダー内）.scssファイルで.cssファイルの交換を開始しますnpm install --save-dev less less-loader@7 （preace piplageアプリケーションフォルダー内）.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 / routes / name | src/routes/home.jssrc/routes/about/index.tsx |
SRC/コンポーネント/ルート/名前 | src/components/routes/profile.tssrc/components/routes/profile/index.js |
SRC/コンポーネント/ async / name | src/components/async/profile.tssrc/components/async/profile/index.js |
注：自動コード分割は、デフォルトのエクスポートのみをサポートします。
- import { Profile } from './routes/profile'; + import Profile from './routes/profile';これは、効果的なコード分割を保証する意図的な制限です。エクスポートという名前のコンポーネントの場合、自動コードの分割をトリガーしないディレクトリに配置します。次に、
routes/または"async!"でインポートすることにより、デフォルトのエクスポートを手動でコードスプリットできます。プレフィックス。
