Build customElement แบบ entry point ด้วย svelte3
Tags: svelte, webcomponents, rollup, snowapck
Published: 2021-02-07 15:49:52

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/potut7p1f7uvfq5uwae4.png)

เราเตรียม webcomponent structure ตามภาพนะครับ มี textBox, Button
เราอยากจะ build webcomponent ให้ได้ตามโครงสร้างที่เราได้กำหนดไว้ใน `src/web_components` เราจะ config ยังไงกัน มาดูครับ

```javascript
/** 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 ของเราให้เรียบร้อยครั
```javascript
let basePath = path.join(__dirname, "./src/web_components");
```

เริ่มอ่าน folder ทั้งหมดจาก basePath ที่เราได้กำหนด
```javascript
const getAllFiles = (dir) =>
  fs.readdirSync(dir).reduce((files, file) => {
  ...
  }, []);
```
จากนั้นเอา folder และ file มา join กัน
```javascript
const getAllFiles = (dir) =>
  fs.readdirSync(dir).reduce((files, file) => {
  const name = path.join(dir, file);
  ...
  }, []);
```
ตรวจสอบว่าชื่อที่ได้มาเป็น file หรือ folder
```javascript
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
```javascript
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
```javascript
const srcFiles = getAllFiles(basePath);
```

เรียกใช้งาน sourceFile เข้าไปใน config ในช่อง input ซึ่ง input ของ rollup สามารถรับค่าเป็น array ได้ นั่นเลยทำเราสามารถส่ง entry point เข้าไปแบบ multiple entry point ได้
```javascript
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`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/atga2r12l10t6irlx321.png)
ก่อน build

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4lbhew9x1wj1j0a1nl1m.png)
หลัง build

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mabjnp5w1iaez3occ1ck.png)
เราสามารถเข้า webcomponent ทั้งหมดภายใต้ web_component/index....js ได้ทันที หรือจะเลือกใช้ component ที่ละตัวได้ ตามที่ต้องการ

การสร้างและ build webcomponent ใน svelte ไม่ใช่เรื่องยากอีกต่อไป ท่านใดที่อ่านยังไม่เข้าใจสามมรถย้อนไปดูเรื่องการ  สร้าง webcomponent ด้วย svelte ได้ ตาม link ด้านล่างได้เลยครับ

[CustomElement ใน Svelte3 ง่ายๆ แค่ปลายนิ้ว](https://dev.to/sutin1234/customelement-svelte3-2em5)

สามารถเรียนรู้การใช้งาน svelte แบบ step by step ได้ที่
[Svelte: Framework Not Framework — (ตอนที่ 1) แรกรู้จัก](https://medium.com/@tanangular/svelte-framework-not-framework-%E0%B8%95%E0%B8%AD%E0%B8%99%E0%B8%97%E0%B8%B5%E0%B9%88-1-%E0%B9%81%E0%B8%A3%E0%B8%81%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B8%88%E0%B8%B1%E0%B8%81-434fde7ff97f)

ขอบคุณทุกท่านที่อ่านมาถึงตรงนี้ ถ้าอ่านแล้วรู้มีประโยชน์ ฝากกด Subscribe หรือ share link ให้คนอื่นรับรู้ด้วยนะครับ ขอบคุณครับ