การสร้าง webomponent ด้วย svelte ทำได้ง่ายมากอยู่แล้ว แล้วยัง config เพียงไม่กี่ขั้นตอน แต่มีสิ่งที่เราต้องการจัดการคือการ build component ออกมาหลายๆ webcomponent พร้อมๆกัน
เราเตรียม webcomponent structure ตามภาพนะครับ มี textBox, Button
เราอยากจะ build webcomponent ให้ได้ตามโครงสร้างที่เราได้กำหนดไว้ใน src/web_components
เราจะ config ยังไงกัน มาดูครับ
/** rollup.config.js */
import svelte from "rollup-plugin-svelte";
import path from "path";
import multiInput from "rollup-plugin-multi-input";
import fs from "fs";
จากนั้นกำหนด basePath webcomponent ของเราให้เรียบร้อยครั
let basePath = path.join(__dirname, "./src/web_components");
เริ่มอ่าน folder ทั้งหมดจาก basePath ที่เราได้กำหนด
const getAllFiles = (dir) =>
fs.readdirSync(dir).reduce((files, file) => {
...
}, []);
จากนั้นเอา folder และ file มา join กัน
const getAllFiles = (dir) =>
fs.readdirSync(dir).reduce((files, file) => {
const name = path.join(dir, file);
...
}, []);
ตรวจสอบว่าชื่อที่ได้มาเป็น file หรือ folder
const getAllFiles = (dir) =>
fs.readdirSync(dir).reduce((files, file) => {
const name = path.join(dir, file);
const isDirectory = fs.statSync(name).isDirectory();
...
}, []);
ถ้าชื่อยังเป็น folder อยู่ก็ไปหาไฟล์มาใหม่ โดยใช้หลักการของ recusive function ถ้าเป็น file แล้วก็ไป merge เข้ากับ files แล้วก็ return ชื่อไฟล์ทั้งหมดออกไป เป็น array
const getAllFiles = (dir) =>
fs.readdirSync(dir).reduce((files, file) => {
const name = path.join(dir, file);
const isDirectory = fs.statSync(name).isDirectory();
return isDirectory ? [...files, ...getAllFiles(name)] : [...files, name];
}, []);
เรียกใช้งานเพื่อเอาชื่อไฟล์ทั้งหมดออกมาเป็น array
const srcFiles = getAllFiles(basePath);
เรียกใช้งาน sourceFile เข้าไปใน config ในช่อง input ซึ่ง input ของ rollup สามารถรับค่าเป็น array ได้ นั่นเลยทำเราสามารถส่ง entry point เข้าไปแบบ multiple entry point ได้
export default {
input: srcFiles,
output: {
format: "es",
dir: "public/build",
},
plugins: [
svelte({
compilerOptions: {
customElement: true },
}),
multiInput({
relative: "src/",
transformOutputPath: (output) => {
return output;
},
})
]
};
พอ config เสร็จลองมา build กันครับ yarn build / npm run build
เรียบร้อยแล้วครับ ได้โครงสร้าง webcomponent ตามที่เรา design ไว้ที่ src แล้ว แล้วยังสามารถ build webcomponent พร้อมกันหลายไฟล์ได้ด้วย สบายเลยงานนี้
เราสามารถเข้า webcomponent ทั้งหมดภายใต้ web_component/index....js ได้ทันที หรือจะเลือกใช้ component ที่ละตัวได้ ตามที่ต้องการ
การสร้างและ build webcomponent ใน svelte ไม่ใช่เรื่องยากอีกต่อไป ท่านใดที่อ่านยังไม่เข้าใจสามมรถย้อนไปดูเรื่องการ สร้าง webcomponent ด้วย svelte ได้ ตาม link ด้านล่างได้เลยครับ
CustomElement ใน Svelte3 ง่ายๆ แค่ปลายนิ้ว
สามารถเรียนรู้การใช้งาน svelte แบบ step by step ได้ที่
Svelte: Framework Not Framework — (ตอนที่ 1) แรกรู้จัก
ขอบคุณทุกท่านที่อ่านมาถึงตรงนี้ ถ้าอ่านแล้วรู้มีประโยชน์ ฝากกด Subscribe หรือ share link ให้คนอื่นรับรู้ด้วยนะครับ ขอบคุณครับ
Top comments (0)