Peringatan
preact-cli sayangnya tidak lagi melihat pengembangan aktif! Ini stabil sehingga Anda dapat mengandalkannya untuk semua aplikasi Anda yang ada, tetapi untuk membuat yang baru, kami merekomendasikan Vite melalui create-preact . Ini menawarkan banyak fitur yang sama tetapi merupakan pengalaman yang jauh lebih cepat, lebih modern. Terima kasih kepada semua kontributor dan pengguna selama bertahun -tahun!
Mulailah membangun aplikasi web progresif yang sudah ada dalam hitungan detik
async! awalanPenting : Node.js> = V14.14 diperlukan.
$ npm init preact-cli < template-name > < project-name >
$ yarn create preact-cli < template-name > < project-name >Contoh:
$ npm init preact-cli default my-project Perintah di atas menarik templat dari preactjs-templates/default dan menghasilkan proyek di ./my-project/ .
Tujuan dari template proyek pra -preact resmi adalah untuk menyediakan pengaturan alat pengembangan yang opinial sehingga pengguna dapat memulai dengan kode aplikasi yang sebenarnya secepat mungkin. Namun, template ini tidak terikat dalam hal bagaimana Anda menyusun kode aplikasi Anda dan perpustakaan apa yang Anda gunakan selain preact.js.
Semua templat proyek resmi adalah repo dalam organisasi preactjs-templates. Ketika template baru ditambahkan ke organisasi, Anda akan dapat menjalankan npm init preact-cli <template-name> <project-name> untuk menggunakan template itu.
Template yang tersedia saat ini meliputi:
Default - Template default dengan semua fitur
Sederhana - Pengaturan Preact yang paling sederhana dalam satu file
Netlify - Netlify CMS Template Menggunakan Preact
TypeScript - Template default diimplementasikan di TypeScript
Widget - Template untuk widget untuk tertanam di situs web lain
Widget -Typescript - Template widget diimplementasikan dalam TypeScript
? Tip: Setiap repo github dengan folder
'template'dapat digunakan sebagai templat khusus:
npm init preact-cli <username>/<repository> <project-name>
Mencantumkan semua repositori resmi preactjs-cli
$ [npm init / yarn create] preact-cli listBuat proyek untuk pengembangan start cepat.
$ [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]
Buat Build Produksi
Anda dapat menonaktifkan default: true dengan mengawali mereka dengan --no-<option> ; Misalnya, --no-sw dan --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
Putar server pengembangan dengan beberapa fitur seperti 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
Catatan:
HTTPS maka Anda dapat menggunakan HTTPS=true preact watchPORT=8091 preact watch Mencetak informasi debug tentang lingkungan setempat.
$ [npm run / yarn] preact info Preact CLI Untuk mengikuti pola PRPL membuat rute awal ( / ) menjadi index.html statis yang dihasilkan.html - Ini memastikan bahwa pengguna dapat melihat halaman Anda sebelum JavaScript dijalankan, dan dengan demikian memberikan pengguna dengan perangkat lambat atau koneksi yang buruk konten situs web Anda jauh lebih cepat.
Preact CLI melakukan ini dengan merender aplikasi Anda di dalam Node - ini berarti bahwa kami tidak memiliki akses ke DOM atau variabel global lainnya yang tersedia di browser, serupa seperti ini dalam skenario rendering sisi server. Jika Anda perlu mengandalkan API browser, Anda bisa:
--no-prerender flag to preact build ,if (typeof window !== "undefined") { ... } memastikan bahwa di server baris kode tersebut tidak pernah tercapai. Atau Anda bisa menggunakan perpustakaan penolong seperti jendela atau global.Untuk membuat penyesuaian konfigurasi Anda lebih mudah, preact-cli mendukung plugin. Kunjungi plugin wiki untuk tutorial tentang cara menggunakannya.
Anda dapat menyesuaikan daftar versi browser yang didukung dengan menyatakan kunci "browserslist" di dalam package.json Anda.json. Mengubah nilai-nilai ini akan memodifikasi legacy javascript Anda (via @babel/preset-env ) dan output CSS (via autoprefixer ) Anda.
Secara default, preact-cli meniru konfigurasi berikut:
package.json
{
"browserslist" : [ " > 0.5% " , " last 2 versions " , " Firefox ESR " , " not dead " ]
}Untuk menyesuaikan Babel, Anda memiliki dua opsi:
Anda dapat membuat file .babelrc di direktori root proyek Anda, atau menggunakan jalur --babelConfig untuk menunjuk pada file konfigurasi Babel yang valid. Pengaturan apa pun yang Anda definisikan di sini akan digabungkan ke preset CLI yang telah ditentukan sebelumnya. Misalnya, jika Anda melewati objek "plugins" yang berisi plugin yang berbeda dari yang sudah digunakan, mereka hanya akan ditambahkan di atas konfigurasi yang ada. Jika ada konflik, Anda akan ingin melihat ke opsi 2, karena default akan diutamakan.
Jika Anda ingin memodifikasi konfigurasi Babel yang ada, Anda harus menggunakan file preact.config.js . Kunjungi bagian Webpack untuk info lebih lanjut, atau lihat contoh Customize Babel!
Untuk menyesuaikan konfigurasi webpack preact-cli, buat preact.config.js atau file 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 **/
} ; Lihat Webpack Config Helters Wiki untuk info lebih lanjut tentang argumen helpers yang berisi metode untuk menemukan berbagai bagian konfigurasi. Selain itu lihat resep kami wiki yang berisi contoh tentang cara mengubah konfigurasi webpack.
Bendera --prerender akan menjadi prerender secara default hanya root aplikasi Anda. Jika Anda ingin menjadi pra-rute lain, Anda dapat membuat file prerender-urls.json , yang berisi set rute yang ingin Anda render. Format yang diperlukan untuk mendefinisikan rute Anda adalah array objek dengan kunci url dan kunci title opsional.
prerender-urls.json
[
{
"url" : " / " ,
"title" : " Homepage "
},
{
"url" : " /route/random "
}
] Anda dapat menyesuaikan jalur dan/atau nama prerender-urls.json dengan menggunakan bendera --prerenderUrls .
preact build --prerenderUrls src/prerender-urls.jsonJika file JSON statis terlalu membatasi, Anda mungkin ingin memberikan file JavaScript yang mengekspor rute Anda sebagai gantinya. Rute dapat diekspor sebagai string JSON atau objek dan secara opsional dapat dikembalikan dari suatu fungsi.
prerender-urls.js
module . exports = [
{
url : '/' ,
title : 'Homepage' ,
} ,
{
url : '/route/random' ,
} ,
] ;
prerender-urls.js
export default ( ) => {
return [
{
url : '/' ,
title : 'Homepage' ,
} ,
{
url : '/route/random' ,
} ,
] ;
} ; Untuk menyesuaikan dokumen HTML yang digunakan aplikasi Anda, edit file template.ejs di direktori sumber aplikasi Anda.
EJS adalah bahasa templating sederhana yang memungkinkan Anda menghasilkan markup HTML dengan javascript biasa. Bersamaan dengan html-webpack-plugin , Anda dapat menambahkan HTML secara kondisional, mengakses bundel dan aset Anda, dan menautkan ke konten eksternal jika Anda mau. Default yang kami berikan pada inisialisasi proyek harus sesuai dengan sebagian besar kasus penggunaan dengan sangat baik, tetapi jangan ragu untuk menyesuaikan!
Anda dapat menyesuaikan lokasi template Anda dengan bendera --template pada perintah build and watch :
preact build --template renamed-src/template.ejs
preact watch --template template.ejs Templat default hadir dengan file .css untuk setiap komponen. Anda dapat mulai menggunakan preprocessor CSS pada waktu tertentu selama siklus hidup proyek Anda dengan memasang paket tambahan dan kemudian cukup mengganti file .css .
npm install --save-dev sass sass-loader@10 (di dalam folder aplikasi preact Anda).css dengan file .scss npm install --save-dev less less-loader@7 (di dalam folder aplikasi Preact Anda).css dengan file .less Anda dapat merujuk dan menggunakan variabel lingkungan apa pun dalam aplikasi Anda yang telah diawali dengan PREACT_APP_ secara otomatis:
src/index.js
console . log ( process . env . PREACT_APP_MY_VARIABLE ) ; Jika variabel Anda tidak diawali, Anda masih dapat menambahkannya secara manual dengan menggunakan preact.config.js Anda (lihat konfigurasi defineplugin di wiki resep).
Penting untuk dicatat bahwa DefinePlugin melakukan penggantian teks langsung; itu tidak membuat process dapat digunakan. process.env bisa menjadi objek kosong, namun process.env.PREACT_APP_MY_VARIABLE masih akan diganti secara otomatis (jika nilai ada).
Anda dapat mengatur dan menyimpan variabel menggunakan file .env di root proyek Anda:
.env
PREACT_APP_MY_VARIABLE="my-value"
Anda juga dapat merujuk variabel lingkungan di preact.config.js Anda:
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 **/
}
} ;Komponen "rute" secara otomatis ditempatkan pada waktu pembuatan untuk membuat bundel yang lebih kecil dan menghindari memuat lebih banyak kode daripada yang dibutuhkan oleh setiap halaman. Ini berfungsi dengan mencegat impor untuk komponen rute dengan loader async, yang mengembalikan komponen pembungkus ringan yang menangani pemisahan kode dengan mulus.
Pemisahan kode otomatis diterapkan untuk semua file JavaScript dan TypeScript di lokasi berikut:
| Pola | Contoh |
|---|---|
src / rute / nama | src/routes/home.jssrc/routes/about/index.tsx |
src/ komponen/ rute / nama | src/components/routes/profile.tssrc/components/routes/profile/index.js |
src/ komponen/ async / name | src/components/async/profile.tssrc/components/async/profile/index.js |
Catatan : Pemisahan kode otomatis hanya mendukung ekspor default, tidak bernama ekspor:
- import { Profile } from './routes/profile'; + import Profile from './routes/profile';Ini adalah batasan yang disengaja yang memastikan pemisahan kode yang efektif. Untuk komponen yang membutuhkan ekspor bernama, letakkan di direktori yang tidak memicu pemisahan kode otomatis. Anda kemudian dapat secara manual menggunakan ekspor default dengan mengekspornya kembali dari
routes/atau mengimpornya dengan"async!"awalan.
