Предупреждение
preact-cli к сожалению, больше не видит активную разработку! Он стабилен, поэтому вы можете полагаться на это для всех ваших существующих приложений, но для создания новых мы рекомендуем VITE через create-preact . Он предлагает много тех же функций, но это гораздо более быстрый, более современный опыт. Спасибо всем участникам и пользователям за эти годы!
Начните создавать Preact Progressive Web App за считанные секунды
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/ .
Цель официальных шаблонов проекта Preact - предоставить самоуверенные настройки инструментов разработки, чтобы пользователи могли начать с фактического кода приложения как можно быстрее. Тем не менее, эти шаблоны не включены с точки зрения того, как вы структурируете код вашего приложения и какие библиотеки вы используете в дополнение к Preact.js.
Все официальные шаблоны проекта-это репо в организации PreactJS-Templates. Когда в организации добавлен новый шаблон, вы сможете запустить npm init preact-cli <template-name> <project-name> чтобы использовать этот шаблон.
Текущие доступные шаблоны включают в себя:
по умолчанию - шаблон по умолчанию со всеми функциями
Простая - самая простая возможная настройка Preact в одном файле
NetLify - NetLify CMS -шаблон с использованием preact
TypeScript - шаблон по умолчанию реализован в TypeScript
Виджет - шаблон для виджета, который должен быть встроен на другой веб -сайт
тип вида виджета - шаблон виджета, реализованный в TypeScript
? Совет: Любое репо с папкой
'template'можно использовать в качестве пользовательского шаблона:
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 Flags, префикс их с помощью --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 watchPORT=8091 preact watch Отчеты отладки информации о местной среде.
$ [npm run / yarn] preact info Preact CLI, чтобы следовать шаблону PRPL render Первоначальный маршрут ( / ) в сгенерированный статический index.html - это гарантирует, что пользователи могут видеть вашу страницу перед запуском JavaScript, и, таким образом, предоставляют пользователям медленные устройства или плохое подключение вашего веб -сайта.
Preact CLI делает это, отдавая ваше приложение внутри узла - это означает, что у нас нет доступа к DOM или другим глобальным переменным, доступным в браузерах, аналогично тому, как это будет в сценариях рендеринга на стороне сервера. Если вам нужно полагаться на API -интерфейсы браузеров, вы можете:
--no-prerender флага в preact build ,if (typeof window !== "undefined") { ... } Убедитесь, что на сервере эти строки кода никогда не достигаются. В качестве альтернативы вы можете использовать помощник библиотеку, такую как окно-или-глобальное.Чтобы упростить настройку вашей конфигурации, Preact-Cli поддерживает плагины. Посетите плагины Wiki для учебника о том, как их использовать.
Вы можете настроить свой список поддерживаемых версий браузера, объявив ключ "browserslist" в вашем package.json . Изменение этих значений изменит ваш устаревший Javascript (через @babel/preset-env ) и ваш выход CSS (через autoprefixer ).
По умолчанию preact-cli эмулирует следующую конфигурацию:
package.json
{
"browserslist" : [ " > 0.5% " , " last 2 versions " , " Firefox ESR " , " not dead " ]
}Чтобы настроить Babel, у вас есть два варианта:
Вы можете создать файл .babelrc в корневом каталоге вашего проекта или использовать путь --babelConfig в точку в любом действительном файле конфигурации Babel. Любые настройки, которые вы определяете здесь, будут объединены в предварительную работу Preact CLI. Например, если вы передаете объект "plugins" , содержащий разные плагины из тех, которые уже используются, они просто будут добавлены поверх существующей конфигурации. Если есть конфликты, вы захотите изучить вариант 2, так как по умолчанию будет приостановить приоритет.
Если вы хотите изменить существующую конфигурацию Babel, вы должны использовать файл preact.config.js . Посетите раздел WebPack для получения дополнительной информации или ознакомьтесь с примером настройки Babel!
Чтобы настроить конфигурацию WebPack Preact-Cli, создайте 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 **/
} ; См. Webpack Config Helpers Wiki для получения дополнительной информации о аргументе helpers , который содержит методы для поиска различных частей конфигурации. Кроме того, см. В наших рецептах вики, содержащие примеры того, как изменить конфигурацию веб -пакета.
Флаг --prerender будет предварительно предварительно по умолчанию только корень вашего приложения. Если вы хотите преподносить другие маршруты, вы можете создать файл prerender-urls.json , который содержит набор маршрутов, которые вы хотите отображать. Формат, необходимый для определения ваших маршрутов, представляет собой массив объектов с ключом url и необязательным ключом title .
prerender-urls.json
[
{
"url" : " / " ,
"title" : " Homepage "
},
{
"url" : " /route/random "
}
] Вы можете настроить путь и/или название prerender-urls.json используя флаг --prerenderUrls .
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 - это простой язык шаблона, который позволяет генерировать HTML -разметку с помощью простого JavaScript. Наряду с html-webpack-plugin , вы можете условно добавить HTML, получить доступ к своим пакетам и активам и ссылаться на внешний контент, если хотите. По умолчанию, которое мы предоставляем при инициализации проекта, должны очень хорошо соответствовать большинству вариантов использования, но не стесняйтесь настроить!
Вы можете настроить местоположение вашего шаблона с помощью флага --template в командах build и watch :
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 (см. DefinePlugin Config в рецептах Wiki).
Важно отметить, что 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/ components/ async / name | src/components/async/profile.tssrc/components/async/profile/index.js |
Примечание . Автоматическое разделение кода поддерживает только экспорт по умолчанию, а не с именем экспорта:
- import { Profile } from './routes/profile'; + import Profile from './routes/profile';Это преднамеренное ограничение, которое обеспечивает эффективное разделение кода. Для компонентов, которые нуждаются в названном экспорте, поместите их в каталог, который не запускает автоматическое разделение кода. Затем вы можете вручную сдвинуть код экспорта по умолчанию, реэкспортируя его с
routes/или импортируя его с помощью"async!"префикс.
