โค้ดสะอาดขึ้นด้วยเทคนิค node modules resolution

เรื่องที่จะเอามาแชร์วันนี้ อาจจะไม่ได้เกี่ยวข้องกับ svelte3 โดยตรงซักเท่าไหร่ จริงๆมันเกี่ยวกับ node ecosystem มากกว่า นั่นคือ เราสามารถใช้เทคนิคนี้ไปประยุกต์ใช้กับโปรเจคทุกตัวที่เกี่ยวข้องกับ nodejs

เริ่มเรื่องกันเลยดีกว่า เรื่องมันมีอยู่ว่า เมื่อไม่กี่วันเห็น Rich Harris ศาสดา Svelte3 tweet ว่า

สรุปโดยรวมว่า เค้าใช้เทคนิคการ hack นิดหน่อย หรือใครจะเรียกว่า tip ก็ได้ โดยการสร้าง folder node_modules ฝังอยู่ใต้ src เพื่อช่วยให้เวลา import file ใน code base ดู clean ขึ้น ไม่ต้องเขียนในลักษณะนี้

import xxx from ‘…/…/yyy”

เพื่อให้เห็นภาพและเทคนิคนี้กัน เลยขอยกตัวอย่างตัวอย่างประกอบ จาก svelte3 project ละกัน (แต่อย่างที่บอกตอนต้น เอาไปประยุกต์ใช้ได้กับ project อื่นๆ ที่เกี่ยวข้องกับ node_modules)

สมมุติเราวาง folder structure ใน project ตามนี้

รูปภาพที่ 1: โครงสร้างไฟล์ในโปรเจค svelte3

รูปภาพที่ 2: main.js

รูปภาพที่ 3: App Component (App.svelte)

รูปภาพที่ 4: utility.js

รูปภาพที่ 5: Mine Component (Mine.svelte)

จากรูปภาพที่ 1 สมมุติเรามี utility.js (รูปภาพที่ 4) เป็นไฟล์ที่เราเก็บ function ที่ใช้งานบ่อยๆใน project และวางไฟล์ไว้ใน path ดังนี้

src/misc/utils/utility.js

ในรูปภาพที่ 3 “App.svelte” ดึงเอา function “reverseString” จาก “utility.js” มาใช้งาน

import { reverseString } from ‘../../misc/utils/utility’

หรือในรูปที่ 5 Mine.svelte มีการเรียกใช้งานจาก “removeDuplicates” function จาก “utility.js”

import { removeDuplicates } from ‘../misc/utils/utility’

สังเกตุว่า import หน้าตาไม่ค่อยดีเลยใช่ไหม ? ต้องเขียน ../../ ลักษณะนี้ ยิ่งถ้า folder วางลึกหลายชั้นยิ่งอัปลักษณ์ไปกันใหญ่ หากโครงสร้าง folder เปลี่ยนไปเราต้องแก้ไขโค้ดตรงจุดนี้กันใหม่อีก ดูแล้วไม่ค่อยสะดวกเลย แล้วยังไงดีละ

เรามาดูเทคนิคที่ Rich Harris พูดถึงกัน

“วาง node_modules ซ้อนเข้าไปใน src”

โดยปกติแล้วเวลาเราติดตั้ง node_modules โดยคำสั่ง

npm install

node_modules จะวางอยู่ที่ root project เสมอ และเวลาเรา import module มาใช้งาน เราจะเขียนอะไรคล้ายๆแบบนี้ใช่ไหม

import $ from ‘jQuery’ 
หรือ 
import Vue from ‘vue’

ถ้า node_modules นั้นไม่ใช่ core modules และไม่ได้เขียนต้นในลักษณะนี้

'/', '../', หรือ'./'

node จะ resolve path ของ modules โดยค้นหาจาก node_modules folder ที่ใกล้ตัวที่สุด ถ้าไม่เจอก็ไล่หาใน parent folder ไล่ขึ้นไปเรื่อยๆ จนกว่าจะเจอ ถ้าไม่เจอก็จะ error ออกมาในที่สุด (พยายามหาจนสุดความสามารถแล้ว 555)

จากความรู้ด้านบน เมื่อเรารู้พฤฒิกรรมของ node เราก็สามารถประยุกต์ใช้ได้ดังนี้ จากโครงสร้าง folder structure เราวางไฟล์ utility ใหม่ได้ดังนี้

รูปภาพที่ 6: สร้าง node_modules ภายใต้ src และย้าย misc และ components ไปไว้ใต้ src/node_modules

รูปภาพที่ 7: เปรียบเทียบ path ทั้ง 3 ไฟล์ App.svelte, Mine.svelte และ main.js

หลังจากที่เราย้ายสร้าง node_modules ขึ้นมาใหม่ภายใต้ src เราจะได้ path ใหม่ตามรูปภาพที่ 7 สังเกตุเห็นว่าถึงแม้
components/main/App.svelte
และ
components/Mine.svelte
จะอยู่ต่าง path กันแต่ตอน import utility.js จะเขียนเหมือนกัน

สรุปแล้วเทคนิคนี้เสมือนการอ้าง path แบบ absolute path แทนที่จะอ้างแบบ relative path ทำให้ code base ดู clean ขึ้น และการโยกย้าย path ในภายหลังลดภาระในแก้ code base ไปได้เยอะเลย เราจะเห็นเทคนิคนี้ Rich Harris นำมาใช้ใน project “sapper” อีกด้วย