preact cli

preact-cli

คำเตือน

preact-cli โชคไม่ดีที่ไม่เห็นการพัฒนาที่ใช้งานอีกต่อไป! มันมีเสถียรภาพดังนั้นคุณสามารถพึ่งพามันสำหรับแอพที่มีอยู่ทั้งหมดของคุณ แต่สำหรับการสร้างแอพใหม่เราขอแนะนำ VITE ผ่าน create-preact มันมีคุณสมบัติเดียวกันมากมาย แต่เป็นประสบการณ์ที่เร็วกว่าและทันสมัยกว่ามาก ขอบคุณผู้มีส่วนร่วมและผู้ใช้ทุกคนในช่วงหลายปีที่ผ่านมา!

เริ่มสร้างแอปพลิเคชัน Preact Progressive ในไม่กี่วินาที

สารบัญ

• คุณสมบัติ
• การใช้งาน
• เทมเพลตอย่างเป็นทางการ
• ตัวเลือก CLI
  • preact สร้าง
  • Preact Build
  • Preact Watch
  • รายการ preact
  • ข้อมูลล่วงหน้า
• การแสดงผลล่วงหน้า
• การกำหนดค่าที่กำหนดเอง
  • ปลั๊กอิน
  • รายชื่อเบราว์เซอร์
  • บาเบล
  • เว็บแพ็ค
  • PRERENDER หลายเส้นทาง
  • เทมเพลต
• ใช้ CSS preprocessors
  • เขี้ยว
  • น้อย
• การใช้ตัวแปรสภาพแวดล้อม
• การแยกรหัสตามเส้นทาง

คุณสมบัติ

• คะแนน 100/100 ประภาคาร ออกจากกล่อง (พิสูจน์)
• การแยกรหัสอัตโนมัติ เต็มรูปแบบสำหรับเส้นทาง (ดูการแยกรหัสตามเส้นทาง)
• โค้ดแยกส่วนประกอบใด ๆ ด้วย async! คำนำหน้า
• พนักงานบริการที่สร้างโดยอัตโนมัติสำหรับการแคชออฟไลน์ขับเคลื่อนโดย Workbox
• รูปแบบ PRPL รองรับการโหลดที่มีประสิทธิภาพ
• ศูนย์การกำหนดค่าล่วงหน้าการแสดงผล / การแสดงความชุ่มชื้นแบบฝั่งเซิร์ฟเวอร์
• รองรับโมดูล CSS, น้อย, sass, stylus; ด้วย AutopRefixer
• ตรวจสอบขนาดชุด/ก้อนของคุณด้วยการติดตามในตัว
• การติดตั้งแอพอัตโนมัติ, ผู้ช่วยดีบักและการเปลี่ยนโมดูลร้อน
• ในเพียง 4.5kb คุณจะได้รับสภาพแวดล้อมที่มีประสิทธิผล:
  • ทำขึ้นก่อน
  • preact-router
  • โพลีฟิลด์ที่โหลดตามเงื่อนไข 1.5KB สำหรับการดึงและสัญญา

ความต้องการ

สำคัญ : จำเป็นต้องใช้ 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/ค่าเริ่มต้นและสร้างโครงการที่ ./my-project/ project/

เทมเพลตอย่างเป็นทางการ

วัตถุประสงค์ของเทมเพลตโครงการ PREACT อย่างเป็นทางการคือการจัดเตรียมการตั้งค่าเครื่องมือการพัฒนาที่มีความคิดเห็นเพื่อให้ผู้ใช้สามารถเริ่มต้นด้วยรหัสแอปจริงได้เร็วที่สุด อย่างไรก็ตามเทมเพลตเหล่านี้ไม่ได้รับการปรับแต่งในแง่ของวิธีการจัดโครงสร้างรหัสแอพของคุณและไลบรารีที่คุณใช้นอกเหนือจาก preact.js

เทมเพลตโครงการอย่างเป็นทางการทั้งหมดเป็น repos ในองค์กร preactjs-templates เมื่อมีการเพิ่มเทมเพลตใหม่ให้กับองค์กรคุณจะสามารถเรียกใช้ npm init preact-cli <template-name> <project-name> เพื่อใช้เทมเพลตนั้น

เทมเพลตที่มีอยู่ในปัจจุบันรวมถึง:

• ค่าเริ่มต้น - เทมเพลตเริ่มต้นพร้อมคุณสมบัติทั้งหมด

• ง่าย - การตั้งค่า preact ที่ง่ายที่สุดที่เป็นไปได้ในไฟล์เดียว

• netlify - netlify cms แม่แบบโดยใช้ preact

• TypeScript - เทมเพลตเริ่มต้นที่ใช้ใน typeScript

• วิดเจ็ต - เทมเพลตสำหรับวิดเจ็ตที่จะฝังอยู่ในเว็บไซต์อื่น

• วิดเจ็ตประเภท - เทมเพลตวิดเจ็ตที่ใช้ใน TypeScript

- เคล็ดลับ: repo github ใด ๆ ที่มีโฟลเดอร์ 'template' สามารถใช้เป็นเทมเพลตที่กำหนดเอง:
npm init preact-cli <username>/<repository> <project-name>

ตัวเลือก CLI

รายการ preact

แสดงรายการที่เก็บ preactjs-cli อย่างเป็นทางการทั้งหมด

$ [npm init / yarn create] preact-cli list

preact สร้าง

สร้างโครงการเพื่อเริ่มการพัฒนาอย่างรวดเร็ว

 $ [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]

Preact Build

สร้างงานสร้างการผลิต

คุณสามารถปิด 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

Preact Watch

หมุนเซิร์ฟเวอร์การพัฒนาด้วยคุณสมบัติหลายอย่างเช่น 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

บันทึก:

1. คุณสามารถเรียกใช้เซิร์ฟเวอร์ dev โดยใช้ HTTPS จากนั้นคุณสามารถใช้ HTTPS=true preact watch ต่อไปนี้ต่อไปนี้
2. คุณสามารถเรียกใช้เซิร์ฟเวอร์ dev บนพอร์ตอื่นโดยใช้ PORT=8091 preact watch

ข้อมูลล่วงหน้า

พิมพ์ข้อมูลการดีบักเกี่ยวกับสภาพแวดล้อมในท้องถิ่น

$ [npm run / yarn] preact info

การแสดงผลล่วงหน้า

preact CLI เพื่อติดตามรูปแบบ PRPL ทำให้เส้นทางเริ่มต้น ( / ) เป็น index.html ที่สร้างขึ้น - สิ่งนี้ทำให้มั่นใจได้ว่าผู้ใช้จะได้เห็นหน้าเว็บของคุณก่อนที่จะเรียกใช้ JavaScript และทำให้ผู้ใช้มีอุปกรณ์ช้า

Preact CLI ทำสิ่งนี้โดยการแสดงแอปของคุณภายใน Node - ซึ่งหมายความว่าเราไม่สามารถเข้าถึง DOM หรือตัวแปรส่วนกลางอื่น ๆ ที่มีอยู่ในเบราว์เซอร์ซึ่งคล้ายกันว่ามันจะอยู่ในสถานการณ์การเรนเดอร์ฝั่งเซิร์ฟเวอร์อย่างไร ในกรณีที่คุณต้องการพึ่งพา API เบราว์เซอร์ที่คุณสามารถทำได้:

• หลุดจากการทำล่วงหน้าโดยผ่าน --no-prerender ค่าสถานะของ Preact เพื่อ preact build
• เขียนโค้ดของคุณในลักษณะที่รองรับการเรนเดอร์ฝั่งเซิร์ฟเวอร์โดยการห่อรหัสที่ต้องใช้ API ของเบราว์เซอร์ในคำสั่งแบบมีเงื่อนไข if (typeof window !== "undefined") { ... } เพื่อให้แน่ใจว่าบนเซิร์ฟเวอร์บรรทัดของรหัสเหล่านั้นจะไม่ถึง อีกทางเลือกหนึ่งคุณสามารถใช้ไลบรารีผู้ช่วยเช่น Window-or-Global

การกำหนดค่าที่กำหนดเอง

ปลั๊กอิน

เพื่อให้การปรับแต่งการกำหนดค่าของคุณง่ายขึ้น Preact-CLI รองรับปลั๊กอิน เยี่ยมชมปลั๊กอินวิกิสำหรับการสอนเกี่ยวกับวิธีการใช้งาน

รายชื่อเบราว์เซอร์

คุณสามารถปรับแต่งรายชื่อเบราว์เซอร์ที่รองรับได้โดยประกาศคีย์ "browserslist" ภายใน package.json ของคุณ json การเปลี่ยนค่าเหล่านี้จะแก้ไข JavaScript ดั้งเดิมของคุณ (ผ่าน @babel/preset-env ) และเอาต์พุต CSS ของคุณ (ผ่าน autoprefixer )

โดยค่าเริ่มต้น preact-cli เลียนแบบการกำหนดค่าต่อไปนี้:

package.json

{
	"browserslist" : [ " > 0.5% " , " last 2 versions " , " Firefox ESR " , " not dead " ]
}

บาเบล

ในการปรับแต่ง Babel คุณมีสองตัวเลือก:

1. คุณสามารถสร้างไฟล์ .babelrc ในไดเรกทอรีรูทของโครงการของคุณหรือใช้พา ธ --babelConfig เพื่อชี้ไปที่ไฟล์กำหนดค่า Babel ที่ถูกต้องใด ๆ การตั้งค่าใด ๆ ที่คุณกำหนดไว้ที่นี่จะถูกรวมเข้ากับ preact CLI ที่ตั้งไว้ล่วงหน้า ตัวอย่างเช่นหากคุณผ่านวัตถุ "plugins" ที่มีปลั๊กอินที่แตกต่างจากที่ใช้งานอยู่แล้วพวกเขาจะถูกเพิ่มไว้ที่ด้านบนของการกำหนดค่าที่มีอยู่ หากมีความขัดแย้งคุณจะต้องดูตัวเลือก 2 เนื่องจากค่าเริ่มต้นจะมีความสำคัญ

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 ซึ่งมีวิธีการค้นหาส่วนต่าง ๆ ของการกำหนดค่า นอกจากนี้ดูสูตรของเราวิกิที่มีตัวอย่างเกี่ยวกับวิธีการเปลี่ยนการกำหนดค่า WebPack

PRERENDER หลายเส้นทาง

-ธง --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 ด้วยจาวาสคริปต์ธรรมดา นอกเหนือจาก html-webpack-plugin คุณสามารถเพิ่ม HTML ได้อย่างมีเงื่อนไขเข้าถึงการรวมกลุ่มและสินทรัพย์ของคุณและเชื่อมโยงไปยังเนื้อหาภายนอกหากต้องการ ค่าเริ่มต้นที่เราให้ไว้ในการเริ่มต้นโครงการควรพอดีกับกรณีการใช้งานส่วนใหญ่เป็นอย่างดี แต่อย่าลังเลที่จะปรับแต่ง!

คุณสามารถปรับแต่งตำแหน่งของเทมเพลตของคุณด้วยธง --template เทมเพลตบนคำสั่ง build และ watch :

preact build --template renamed-src/template.ejs
preact watch --template template.ejs

ใช้ CSS preprocessors

เทมเพลตเริ่มต้นมาพร้อมกับไฟล์ .css สำหรับแต่ละองค์ประกอบ คุณสามารถเริ่มใช้ตัวประมวลผล preprocessors 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 **/
	}
} ;

การแยกรหัสตามเส้นทาง

ส่วนประกอบ "เส้นทาง" จะถูก จำกัด รหัสโดยอัตโนมัติในเวลาสร้างเพื่อสร้างชุดที่เล็กลงและหลีกเลี่ยงการโหลดโค้ดมากกว่าที่แต่ละหน้าต้องการ สิ่งนี้ทำงานได้โดยการสกัดกั้นการนำเข้าสำหรับส่วนประกอบเส้นทางด้วยตัวโหลด async ซึ่งส่งคืนส่วนประกอบ wrapper น้ำหนักเบาที่จัดการกับการแยกรหัสได้อย่างราบรื่น

การแยกรหัสอัตโนมัติถูกนำไปใช้กับไฟล์ JavaScript และ typeScript ทั้งหมดในตำแหน่งต่อไปนี้:

ลวดลาย	ตัวอย่าง
src / เส้นทาง / ชื่อ	src/routes/home.js src/routes/about/index.tsx
src/ ส่วนประกอบ/ เส้นทาง / ชื่อ	src/components/routes/profile.ts src/components/routes/profile/index.js
src/ ส่วนประกอบ/ async / name	src/components/async/profile.ts src/components/async/profile/index.js

หมายเหตุ : การแยกรหัสอัตโนมัติรองรับการส่งออกเริ่มต้น เท่านั้น ไม่ใช่ชื่อการส่งออก:

 - import { Profile } from './routes/profile';
+ import Profile from './routes/profile';

นี่คือข้อ จำกัด โดยเจตนาที่ทำให้มั่นใจได้ว่าการแยกรหัสที่มีประสิทธิภาพ สำหรับส่วนประกอบที่ต้องการการส่งออกที่มีชื่อให้วางไว้ในไดเรกทอรีที่ไม่กระตุ้นการแยกรหัสอัตโนมัติ จากนั้นคุณสามารถแยกรหัสการส่งออกเริ่มต้นด้วยตนเองโดยส่งออกใหม่จาก routes/ หรือนำเข้าด้วย "async!" คำนำหน้า