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

การสร้าง 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

ก่อน build

หลัง 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 ให้คนอื่นรับรู้ด้วยนะครับ ขอบคุณครับ