DEV Community

Cover image for Build customElement แบบ entry point ด้วย svelte3
thinny
thinny

Posted on

Build customElement แบบ entry point ด้วย svelte3

การสร้าง webomponent ด้วย svelte ทำได้ง่ายมากอยู่แล้ว แล้วยัง config เพียงไม่กี่ขั้นตอน แต่มีสิ่งที่เราต้องการจัดการคือการ build component ออกมาหลายๆ webcomponent พร้อมๆกัน

Alt Text

เราเตรียม 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";
Enter fullscreen mode Exit fullscreen mode

จากนั้นกำหนด basePath webcomponent ของเราให้เรียบร้อยครั

let basePath = path.join(__dirname, "./src/web_components");
Enter fullscreen mode Exit fullscreen mode

เริ่มอ่าน folder ทั้งหมดจาก basePath ที่เราได้กำหนด

const getAllFiles = (dir) =>
  fs.readdirSync(dir).reduce((files, file) => {
  ...
  }, []);
Enter fullscreen mode Exit fullscreen mode

จากนั้นเอา folder และ file มา join กัน

const getAllFiles = (dir) =>
  fs.readdirSync(dir).reduce((files, file) => {
  const name = path.join(dir, file);
  ...
  }, []);
Enter fullscreen mode Exit fullscreen mode

ตรวจสอบว่าชื่อที่ได้มาเป็น file หรือ folder

const getAllFiles = (dir) =>
  fs.readdirSync(dir).reduce((files, file) => {
   const name = path.join(dir, file);
   const isDirectory = fs.statSync(name).isDirectory();
   ...
  }, []);
Enter fullscreen mode Exit fullscreen mode

ถ้าชื่อยังเป็น 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];
  }, []);
Enter fullscreen mode Exit fullscreen mode

เรียกใช้งานเพื่อเอาชื่อไฟล์ทั้งหมดออกมาเป็น array

const srcFiles = getAllFiles(basePath);
Enter fullscreen mode Exit fullscreen mode

เรียกใช้งาน 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;
        },
      })
    ]
};
Enter fullscreen mode Exit fullscreen mode

พอ config เสร็จลองมา build กันครับ yarn build / npm run build

Alt Text
ก่อน build

Alt Text
หลัง build

เรียบร้อยแล้วครับ ได้โครงสร้าง webcomponent ตามที่เรา design ไว้ที่ src แล้ว แล้วยังสามารถ build webcomponent พร้อมกันหลายไฟล์ได้ด้วย สบายเลยงานนี้

Alt Text
เราสามารถเข้า 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)