เครื่องมือสร้างที่เน้นแยมที่เน้นเป็นมิตรสำหรับแอพ Svelte
ฉันสร้างยูทิลิตี้นี้เพื่อนั่งร้านการกำหนดค่าสำหรับโครงการ svelte ของฉัน เนื่องจากฉันมุ่งเน้นไปที่ไซต์คงที่และแอพฝั่งไคลเอ็นต์ที่สามารถนำไปใช้กับ Netlify Sapper จึงมีโครงสร้างพื้นฐานจำนวนมากสำหรับการพัฒนาฝั่งเซิร์ฟเวอร์ที่ฉันไม่ต้องการ Svelte Kit อยู่ใกล้กับการเปลี่ยนรุ่นต่อไปสำหรับ Sapper แต่อาจไม่พร้อมในการผลิตในอนาคตอันใกล้ดังนั้นฉันจะรักษาเครื่องมือ CLI นี้ไว้จนกว่าฉันจะมีการเปลี่ยนที่มั่นคง
นี่คือคุณสมบัติบางอย่างที่ svelte-render
เพิ่มขึ้นบนการกำหนดค่าการหมุนเริ่มต้น:
require()
อีกเลย! npm i @metamodern/svelte-render
สคริปต์ CLI ถูกปล่อยเป็นโมดูล ES เท่านั้น เวอร์ชันขั้นต่ำ Node.js คือ 14 (LTS ล่าสุด ณ วันที่วางจำหน่าย)
npx svelte-render [context] [--key = value]
# default to process.cwd() as context
cd project
npx svelte-render [--key = value]
# skip production optimizations
npx svelte-render --development
# just output HTML from the entry file
npx svelte-render --client=0 --noCss
# specify a custom directory structure
npx svelte-render --src=. --dist=public
# specify the path to your config file
# ** if not at ./render.config.js **
npx svelte-render --configFile=./config/svelte-render.js
ตัวเลือกอาจระบุโดยใช้ไฟล์การกำหนดค่า ไฟล์ควรใช้ไวยากรณ์การนำเข้า/ส่งออกโมดูล ES การส่งออกเริ่มต้นควรเป็นฟังก์ชั่นที่ใช้วัตถุที่มีตัวเลือกบรรทัดคำสั่งเป็น arugment และส่งคืนวัตถุที่ระบุตัวเลือกเพิ่มเติมเพื่อส่งผ่านไปยังฟังก์ชั่นการเรนเดอร์
ไฟล์กำหนดค่าคาดว่าจะพบได้ที่ ./render.config.js
(เทียบกับ context
) แต่สามารถระบุเส้นทางที่กำหนดเองได้จากบรรทัดคำสั่งดังที่แสดงด้านบน
ดูด้านล่างสำหรับรายการตัวเลือกทั้งหมดที่อาจส่งผ่านไปยังฟังก์ชั่นการแสดงผล
JavaScript API ถูกปล่อยเป็นโมดูล ES เท่านั้น ไม่รองรับ CommonJS require()
การส่งออกเริ่มต้นของโมดูลเป็นฟังก์ชั่นที่มีพารามิเตอร์ต่อไปนี้:
async function ( context : string , {
src = 'src' ,
assets = 'assets' ,
dist = 'dist' ,
entry = 'index.svelte' ,
client = 'client.js' ,
noCss = false ,
development = false ,
transpile = ! development ,
rollupInputPlugins = [ ] ,
rollupInputOptions = { } ,
compilerOptions = { } ,
sveltePreprocess = { } ,
svelteOptions = { } ,
terserOptions = { } ,
browsers = 'defaults' ,
babelPresets = [ [ '@babel/preset-env' , {
targets : browsers ,
corejs : 3 ,
useBuiltIns : 'usage' ,
} ] ] ,
babelPlugins = [ ] ,
babelOptions = { } ,
before ,
onRender ,
after ,
} = { } ) : Promise < number > // returns 0 on success
หมายเหตุ: อาร์กิวเมนต์ context
จะต้องใช้เฉพาะเมื่อใช้ JavaScript API เมื่อใช้สคริปต์ CLI context
เริ่มต้นเป็น process.cwd()
ตัวเลือกต่อไปนี้อาจระบุเป็นชื่อไฟล์หรือพา ธ และจะได้รับการแก้ไขเมื่อเทียบกับ context
entry
และ client
dist
development
เปิดอยู่)client
เป็น false
และอย่าใช้ธง development
) <style>
development
) rollup-plugin-svelte
(ภายใต้คีย์ compilerOptions
)rollup-plugin-svelte
(ภายใต้คีย์ preprocess
)rollup-plugin-svelte
rollup-plugin-terser
หมายเหตุ: ตัวเลือกเหล่านี้จะถูกละเว้นเมื่อตั้ง transpile
เป็น false
การเรนเดอร์ตะขอเป็นฟังก์ชั่นในการดำเนินการควบคู่กับฟังก์ชั่นการเรนเดอร์หลัก แต่ละฟังก์ชั่นจะถูกส่งผ่าน context
ที่ได้รับการแก้ไขและวัตถุตัวเลือกทั้งหมด รองรับฟังก์ชั่น Async
© 2020 Daniel C. Narey
ใบอนุญาต ISC