รับมือการใช้ Yarn Pnp บน Rails

Published on
Tags
  • rails
  • ruby
  • stimulus

ปัญหาของ node_modules ทำให้ Yarn เองก็ได้รับการพัฒนาการกลไกการจัดเก็บ dependencies ต่างๆ ให้ดีขึ้น ซึ่งถูกเรียกว่า Plug’n Play โดยเราจะได้ใช้งานกลไกนี้เป็นค่าพื้นฐานเมื่อติดตั้งเวอร์ชันมากกว่า 2.0 ขึ้นไป

เอ๊ะ! แล้วกลไก Plug’n Play มันกระทบกับโปรเจ็ค Rails ของเราอย่างไร สำหรับบทความนี้เราจะโฟกัสกับ Rails 7 ที่ใช้งานร่วมกับ jsbundling-rails โดยเลือกใช้ esbuild เป็นตัวคอมไพล์และบันเดิลโค้ด

ถ้าเราลองสร้างโปรเจ็คง่ายๆ ที่แค่ใช้ ​Stimulus และ Turbo เพียงเท่านั้นตามคำสั่ง rails new myapp -j esbuild -a propshaft จากนั้นก็ทำการคอมไพล์ JavaScript ด้วยคำสั่ง yarn run build ปรากฏว่าเจ้า esbuild จะพ่น error ออกมาว่าหา @hotwired/turbo-rails และ @hotwired/stimulus ไม่พบ

Error

เพราะอะไรกันถึงเป็นแบบนี้ ทั้งๆ ที่ก่อนหน้านี้เราก็ทำเหมือนเดิมทุกอย่าง เมื่อลองไปตรวจสอบโฟลเดอร์ของโปรเจ็คดู ก็พบว่าโฟลเดอร์ node_modules ที่ควรจะมีอยู่หายไป นั้นเป็นเพราะกลไก ​Plug’n Play จะไม่สร้างโฟลเดอร์ node_modules เก็บไว้ในโปรเจ็คเราอีกต่อไป จึงส่งผลให้ esbuild ไม่สามารถค้นหา dependencies ที่ใช้เจอ

Project Directory

จากที่ได้ทดลองหาวิธีแก้ปัญหา เราสามารถทำได้ 2 วิธี (อันนี้เท่าที่ลองเองนะครับ) คือ

  1. กำหนดค่า nodeLinker ใน .yarnrc.yml

    ให้เรากำหนดค่าเป็น nodeLinker: "node-modules" และอาจรันคำสั่ง yarn install อีกครั้ง ด้วยการกำหนด nodeLiker ดังกล่าวทำให้ Yarn ทำการติดตั้ง dependencies เอาไว้ที่โฟลเดอร์ node_modules ในโปรเจ็คเราเหมือนเดิม

  2. ใช้ปลักอิน esbuild-plugin-pnp

    แทนที่จะไปแก้ไขที่ตัวอย่างวิธีการนี้จะเป็นการเพิ่มเติมความสามารถให้กับ esbuild เพื่อให้ไปค้นหา dependencies จากโฟลเดอร์ที่ถูกต้องแทนการค้นหาจากโฟลเดอร์ node_modules ในโปรเจ็ค

     // esbuild.js
     const { build } = require('esbuild')
     const { pnpPlugin } = require('@yarnpkg/esbuild-plugin-pnp')
      
     build({
       entryPoints: ['./app/javascript/application.js'],
       outdir: './app/assets/builds',
       ...
       plugins: [ pnpPlugin() ]
     })
     .then(() => {
       console.log(`⚡ Build Done!!!`)
     })
     .catch(() => process.exit(1))
    

ไม่ว่าจะเลือกวิธีใดวิธีการหนี่งเราก็สามารถจะคอมไพล์และบันเดิลโค้ดของเราได้ตามปกติเหมือนเดิม เพียงแต่อยากจะแนะนำวิธีการที่ 2 มากกว่าวิธีการแรก