การใช้ Scala.js กับ NPM และ Browserify

หากคุณใช้ Scala.js ซึ่งเป็นคอมไพเลอร์ของภาษา Scala เป็น JavaScript คุณอาจพบว่าการจัดการการพึ่งพามาตรฐานของ Scala.js นั้นจำกัดในโลก JavaScript สมัยใหม่เกินไป Scala.js จัดการการพึ่งพาด้วย WebJars ในขณะที่นักพัฒนา JavaScript จัดการการพึ่งพาโดยใช้ NPM เนื่องจากการอ้างอิงที่สร้างโดย NPM เป็นฝั่งเซิร์ฟเวอร์ โดยปกติแล้วจำเป็นต้องมีขั้นตอนเพิ่มเติมโดยใช้ Browserify หรือ Webpack เพื่อสร้างโค้ดของเบราว์เซอร์

ในโพสต์นี้ ฉันจะอธิบายวิธีผสานรวม Scala.js กับโมดูล JavaScript ที่มีอยู่มากมายบน NPM คุณสามารถตรวจสอบที่เก็บ GitHub นี้สำหรับตัวอย่างการทำงานของเทคนิคที่อธิบายไว้ที่นี่ โดยใช้ตัวอย่างนี้และโดยการอ่านโพสต์นี้ คุณจะสามารถรวบรวมไลบรารี JavaScript ของคุณโดยใช้ NPM สร้างบันเดิลโดยใช้ Browserify และใช้ผลลัพธ์ในโครงการ Scala.js ของคุณเอง ทั้งหมดนี้โดยไม่ต้องติดตั้ง Node.js เนื่องจากทุกอย่างจัดการโดย SBT

การจัดการการพึ่งพาสำหรับ Scala.js

ทุกวันนี้ การเขียนแอปพลิเคชันในภาษาที่คอมไพล์เป็น JavaScript กลายเป็นเรื่องธรรมดาไปแล้ว ผู้คนจำนวนมากขึ้นเรื่อยๆ เปลี่ยนไปใช้ภาษา JavaScript แบบขยาย เช่น CoffeeScript หรือ TypeScript หรือทรานสปิลเดอร์อย่าง Babel ซึ่งทำให้คุณใช้ ES6 ได้ในปัจจุบัน ในเวลาเดียวกัน Google Web Toolkit (คอมไพเลอร์จาก Java เป็น JavaScript) ส่วนใหญ่จะใช้สำหรับแอปพลิเคชันระดับองค์กร ด้วยเหตุผลเหล่านี้ ในฐานะนักพัฒนา Scala ฉันไม่ถือว่าการใช้ Scala.js เป็นทางเลือกที่แปลกอีกต่อไป คอมไพเลอร์นั้นรวดเร็ว โค้ดที่สร้างนั้นมีประสิทธิภาพ และโดยรวมแล้วมันเป็นเพียงวิธีการใช้ภาษาเดียวกันทั้งในส่วนหน้าและส่วนหลัง

ที่กล่าวว่าการใช้เครื่องมือ Scala ในโลก JavaScript นั้นยังไม่เป็นธรรมชาติ 100 เปอร์เซ็นต์ บางครั้งคุณต้องเติมช่องว่างจากระบบนิเวศ JavaScript ไปยัง Scala Scala.js ในฐานะภาษามีความสามารถในการทำงานร่วมกันอย่างดีเยี่ยมกับ JavaScript เนื่องจาก Scala.js เป็นคอมไพเลอร์สำหรับภาษา Scala กับ JavaScript มันจึงง่ายมากที่จะเชื่อมต่อโค้ด Scala กับโค้ด JavaScript ที่มีอยู่ สิ่งสำคัญที่สุดคือ Scala.js ช่วยให้คุณสร้างอินเทอร์เฟซที่พิมพ์ (หรือส่วนหน้า) เพื่อเข้าถึงไลบรารี JavaScript ที่ไม่ได้พิมพ์ (คล้ายกับสิ่งที่คุณทำกับ TypeScript) สำหรับนักพัฒนาที่ใช้พิมพ์ภาษาอย่าง Java, Scala หรือแม้แต่ Haskell JavaScript นั้นพิมพ์หลวมเกินไป หากคุณเป็นนักพัฒนาซอฟต์แวร์ อาจเป็นสาเหตุหลักเพราะคุณอาจต้องการใช้ Scala.js เพื่อให้ได้ภาษาที่พิมพ์ (อย่างยิ่ง) ทับภาษาที่ไม่ได้พิมพ์

ปัญหาใน Toolchain มาตรฐานของ Scala.js ซึ่งยึดตาม SBT และยังคงเปิดอยู่บ้างคือ จะรวมการพึ่งพาเช่นไลบรารี JavaScript เพิ่มเติมในโครงการของคุณได้อย่างไร SBT สร้างมาตรฐานบน WebJars ดังนั้นคุณควรใช้ WebJars เพื่อจัดการการพึ่งพาของคุณ น่าเสียดายที่จากประสบการณ์ของผมพบว่าไม่เพียงพอ

ปัญหาเกี่ยวกับ WebJars

ดังที่กล่าวไว้ วิธีมาตรฐานของ Scala.js ในการดึงการพึ่งพา JavaScript นั้นยึดตาม WebJars ท้ายที่สุดแล้ว Scala เป็นภาษา JVM Scala.js ใช้ SBT สำหรับการสร้างโปรแกรมเป็นหลัก และสุดท้าย SBT ก็ยอดเยี่ยมในการจัดการการขึ้นต่อกันของ JAR

ด้วยเหตุนี้ รูปแบบ WebJar จึงถูกกำหนดไว้สำหรับการนำเข้าการพึ่งพา JavaScript ในโลก JVM อย่างแน่นอน WebJar คือไฟล์ JAR ซึ่งรวมถึงเนื้อหาเว็บ โดยที่ไฟล์ JAR แบบธรรมดาจะรวมเฉพาะคลาส Java ที่คอมไพล์แล้วเท่านั้น ดังนั้น แนวคิดของ Scala.js คือคุณควรนำเข้าการพึ่งพา JavaScript ของคุณโดยเพียงแค่เพิ่มการพึ่งพา WebJar ในทำนองเดียวกัน Scala กำลังเพิ่มการพึ่งพา JAR

ไอเดียดีแต่ใช้ไม่ได้

ปัญหาที่ใหญ่ที่สุดของ Webjars คือเวอร์ชันที่กำหนดเองบนไลบรารี JavaScript แบบสุ่มนั้นแทบจะไม่มีให้ใช้งานเป็น WebJar ในขณะเดียวกัน ไลบรารี JavaScript ส่วนใหญ่จะพร้อมใช้งานเป็นโมดูล NPM อย่างไรก็ตาม มีสะพานเชื่อมระหว่าง NPM และ WebJars กับ npm-to-webjar อัตโนมัติ ดังนั้นฉันจึงพยายามนำเข้าไลบรารีซึ่งมีอยู่ในโมดูล NPM ในกรณีของฉัน มันคือ VoxelJS ห้องสมุดสำหรับสร้างโลกที่เหมือน Minecraft ในหน้าเว็บ ฉันพยายามขอไลบรารีเป็น WebJar แต่บริดจ์ล้มเหลวเพียงเพราะไม่มีฟิลด์ใบอนุญาตในตัวอธิบาย

คุณอาจประสบกับประสบการณ์ที่น่าผิดหวังด้วยเหตุผลอื่นๆ กับห้องสมุดอื่นๆ พูดง่ายๆ ก็คือ ดูเหมือนว่าคุณไม่สามารถเข้าถึงแต่ละไลบรารีในป่าในฐานะ WebJar ได้ ข้อกำหนดที่คุณต้องใช้ WebJars เพื่อเข้าถึงไลบรารี JavaScript ดูเหมือนจะจำกัดเกินไป

ป้อน NPM และ Browserify

ตามที่ฉันได้กล่าวไปแล้ว รูปแบบบรรจุภัณฑ์มาตรฐานสำหรับไลบรารี JavaScript ส่วนใหญ่คือ Node Package Manager หรือ NPM ซึ่งรวมอยู่ใน Node.js เวอร์ชันใดก็ได้ ด้วยการใช้ NPM คุณสามารถเข้าถึงไลบรารี JavaScript ที่มีอยู่เกือบทั้งหมดได้อย่างง่ายดาย

โปรดทราบว่า NPM เป็นตัวจัดการแพ็คเกจ โหนด โหนดเป็นการใช้งานฝั่งเซิร์ฟเวอร์ของเอ็นจิ้น V8 JavaScript และติดตั้งแพ็คเกจที่จะใช้บนฝั่งเซิร์ฟเวอร์โดย Node.js อย่างที่เป็นอยู่ NPM นั้นไร้ประโยชน์สำหรับเบราว์เซอร์ อย่างไรก็ตาม ประโยชน์ของ NPM ได้รับการขยายเวลาให้สามารถทำงานกับแอปพลิเคชันเบราว์เซอร์ได้ ต้องขอบคุณเครื่องมือ Browserify ที่แพร่หลาย ซึ่งแน่นอนว่ามีการแจกจ่ายเป็นแพ็คเกจ NPM ด้วย

Browserify พูดง่ายๆ ว่า packager สำหรับเบราว์เซอร์ จะรวบรวมโมดูล NPM ที่สร้าง "มัด" ที่ใช้งานได้ในแอปพลิเคชันเบราว์เซอร์ นักพัฒนา JavaScript จำนวนมากทำงานในลักษณะนี้ - พวกเขาจัดการแพ็คเกจด้วย NPM และหลังจากนั้นให้เบราว์เซอร์เพื่อใช้ในเว็บแอปพลิเคชัน โปรดทราบว่ามีเครื่องมืออื่นๆ ที่ทำงานในลักษณะเดียวกัน เช่น Webpack

เติมช่องว่างจาก SBT เป็น NPM

ด้วยเหตุผลที่ฉันเพิ่งอธิบายไป สิ่งที่ฉันต้องการคือวิธีการติดตั้งการพึ่งพาจากเว็บด้วย NPM เรียกใช้ Browserify เพื่อรวบรวมการพึ่งพาสำหรับเบราว์เซอร์ แล้วใช้กับ Scala.js งานดูซับซ้อนกว่าที่ฉันคาดไว้เล็กน้อย แต่ก็ยังเป็นไปได้ อันที่จริงฉันทำงานนี้แล้วและกำลังอธิบายไว้ที่นี่

เพื่อความง่าย ฉันเลือก Browserify เพราะพบว่าสามารถเรียกใช้ภายใน SBT ได้ ฉันไม่ได้ลองกับ Webpack แม้ว่าฉันเดาว่ามันเป็นไปได้เช่นกัน โชคดีที่ฉันไม่ต้องสตาร์ทในสุญญากาศ มีหลายชิ้นอยู่แล้ว:

• SBT รองรับ NPM แล้ว ปลั๊กอิน sbt-web ที่พัฒนาขึ้นสำหรับ Play Framework สามารถติดตั้งการพึ่งพา NPM ได้
• SBT รองรับการใช้งานจาวาสคริปต์ คุณสามารถเรียกใช้เครื่องมือ Node โดยไม่ต้องติดตั้ง Node เองด้วยปลั๊กอิน sbt-jsengine
• Scala.js สามารถใช้บันเดิลที่สร้างขึ้นได้ ใน Scala.js มีฟังก์ชันการต่อข้อมูลเพื่อรวมไว้ในไลบรารี JavaScript ตามอำเภอใจของแอปพลิเคชันของคุณ

เมื่อใช้คุณสมบัติเหล่านี้ ฉันได้สร้างงาน SBT ที่สามารถดาวน์โหลดการพึ่งพา NPM จากนั้นเรียกใช้ Browserify เพื่อสร้างไฟล์ bundle.js ฉันพยายามรวมโพรซีเดอร์ในเชนการคอมไพล์ และฉันสามารถเรียกใช้งานทั้งหมดได้โดยอัตโนมัติ แต่การที่ต้องประมวลผลการรวมกลุ่มในการคอมไพล์แต่ละครั้งนั้นช้าเกินไป นอกจากนี้ คุณไม่เปลี่ยนการพึ่งพาตลอดเวลา ดังนั้นจึงสมเหตุสมผลที่คุณต้องสร้างบันเดิลด้วยตนเองสักครั้งเมื่อคุณเปลี่ยนการพึ่งพา

ดังนั้น วิธีแก้ปัญหาของฉันคือสร้างโครงการย่อย โครงการย่อยนี้ดาวน์โหลดและจัดแพ็คเกจไลบรารี JavaScript ด้วย NPM และ Browserify จากนั้น ฉันเพิ่มคำสั่ง bundle ลเพื่อรวบรวมการพึ่งพา บันเดิลที่เป็นผลลัพธ์จะถูกเพิ่มไปยังทรัพยากรที่จะใช้ในแอปพลิเคชัน Scala.js

คุณควรดำเนินการ "มัด" นี้ด้วยตนเองทุกครั้งที่คุณเปลี่ยนการขึ้นต่อกันของ JavaScript ดังที่กล่าวไว้ มันไม่ได้เป็นแบบอัตโนมัติในสายการคอมไพล์

วิธีใช้งานเครื่องบันเดิล

หากคุณต้องการใช้ตัวอย่างของฉัน ให้ทำดังนี้: ขั้นแรก ชำระเงินที่เก็บด้วยคำสั่ง Git ปกติ

 git clone https://github.com/sciabarra/scalajs-browserify/

จากนั้นคัดลอกโฟลเดอร์ bundle ลในโครงการ Scala.js ของคุณ เป็นโครงการย่อยสำหรับการรวมกลุ่ม ในการเชื่อมต่อกับโปรเจ็กต์หลัก คุณควรเพิ่มบรรทัดต่อไปนี้ในไฟล์ build.sbt ของคุณ:

 val bundle = project.in(file("bundle")) jsDependencies += ProvidedJS / "bundle.js" addCommandAlias("bundle", "bundle/bundle")

นอกจากนี้ คุณต้องเพิ่มบรรทัดต่อไปนี้ในไฟล์ project/plugins.sbt ของคุณ:

 addSbtPlugin("com.typesafe.sbt" % "sbt-web" % "1.1.1") addSbtPlugin("com.typesafe.sbt" % "sbt-js-engine" % "1.1.3")

เมื่อเสร็จแล้ว คุณมีคำสั่งใหม่ bundle ล ที่คุณสามารถใช้เพื่อรวบรวมการอ้างอิงของคุณ มันจะสร้างไฟล์ bundle.js ภายใต้โฟลเดอร์ src/main/resources ของคุณ

Bundle รวมอยู่ในแอปพลิเคชัน Scala.js ของคุณอย่างไร

คำสั่ง bundle ลที่เพิ่งอธิบายจะรวบรวมการพึ่งพาด้วย NPM แล้วสร้างบันเดิล. bundle.js เมื่อคุณรันคำสั่ง fastOptJS หรือ fullOptJS ScalaJS จะสร้าง myproject-jsdeps.js รวมถึงทรัพยากรทั้งหมดที่คุณระบุเป็นการพึ่งพา JavaScript ดังนั้นบันเดิล. bundle.js ของคุณด้วย ในการรวมการขึ้นต่อกันแบบบันเดิลในแอปพลิเคชันของคุณ คุณควรใช้การรวมต่อไปนี้:

 <script src="target/scala-2.11/myproject-jsdeps.js"></script> <script src="target/scala-2.11/myproject-fastopt.js"></script> <script src="target/scala-2.11/myproject-launcher.js"></script>

บันเดิลของคุณพร้อมใช้งานแล้วโดยเป็นส่วนหนึ่งของ myproject-jsdeps.js บันเดิลพร้อมแล้ว และเราทำงานเสร็จไปบ้างแล้ว (นำเข้าการพึ่งพาและส่งออกไปยังเบราว์เซอร์) ขั้นตอนต่อไปคือการใช้ไลบรารี JavaScript ซึ่งเป็นปัญหาอื่น นั่นคือปัญหาการเข้ารหัส Scala.js เพื่อความสมบูรณ์ ตอนนี้เราจะพูดถึงวิธีใช้บันเดิลใน Scala.js และสร้างส่วนหน้าเพื่อใช้ไลบรารีที่เรานำเข้า

การใช้ไลบรารี JavaScript ทั่วไปในแอปพลิเคชัน Scala.js ของคุณ

เพื่อสรุป เราเพิ่งเห็นวิธีใช้ NPM และ Browserify เพื่อสร้างบันเดิล และรวมบันเดิลนั้นไว้ใน Scala.js แต่เราจะใช้ไลบรารี JavaScript ทั่วไปได้อย่างไร

ขั้นตอนทั้งหมดที่เราจะอธิบายโดยละเอียดในส่วนที่เหลือของโพสต์คือ:

• เลือกไลบรารีของคุณจาก NPM และรวมไว้ใน bundle/package.json
• โหลดด้วย require ในไฟล์โมดูลไลบรารีใน bundle/lib.js
• เขียนด้านหน้าของ Scala.js เพื่อตีความอ็อบเจ็กต์ Bundle ใน Scala.js
• สุดท้าย เขียนโค้ดแอปพลิเคชันของคุณโดยใช้ไลบรารีที่พิมพ์ใหม่

การเพิ่มการพึ่งพา

เมื่อใช้ NPM คุณต้องรวมการพึ่งพาของคุณในไฟล์ package.json ซึ่งเป็นมาตรฐาน

สมมติว่าคุณต้องการใช้ไลบรารี่ที่มีชื่อเสียงสองไลบรารี เช่น jQuery และ Loadash ตัวอย่างนี้ใช้เพื่อจุดประสงค์ในการสาธิตเท่านั้น เนื่องจากมี wrapper ที่ยอดเยี่ยมสำหรับ jQuery ที่พร้อมใช้งานสำหรับการพึ่งพา Scala.js ที่มีโมดูลที่เหมาะสม และ Lodash ก็ไม่มีประโยชน์ในโลกของ Scala อย่างไรก็ตาม ฉันคิดว่านี่เป็นตัวอย่างที่ดี แต่ให้เอาเป็นตัวอย่างเท่านั้น

ดังนั้น ไปที่เว็บไซต์ npmjs.com และค้นหาไลบรารีที่คุณต้องการใช้และเลือกเวอร์ชันด้วย สมมติว่าคุณเลือก jquery-browserify เวอร์ชัน 13.0.0 และ lodash เวอร์ชัน 4.3.0 จากนั้น อัปเดตบล็อกการ dependencies ของ packages.json ของคุณดังนี้:

 "dependencies": { "browserify": "13.0.0", "jquery-browserify": "1.8.1", "lodash": "4.3.0" }

เก็บ browserify ไว้เสมอ เนื่องจากจำเป็นในการสร้างบันเดิล คุณไม่จำเป็นต้องรวมไว้ในบันเดิล

โปรดทราบว่าหากคุณติดตั้ง NPM ไว้ คุณสามารถพิมพ์จากไดเร็กทอรี bundle ล:

 npm install --save jquery-browserify lodash

นอกจากนี้ยังจะอัปเดต package.json หากคุณไม่ได้ติดตั้ง NPM ไว้ ไม่ต้องกังวล SBT จะติดตั้ง Node.js และ NPM เวอร์ชัน Java ดาวน์โหลด JAR ที่จำเป็นและเรียกใช้ ทั้งหมดนี้ได้รับการจัดการเมื่อคุณรันคำสั่ง bundle ลจาก SBT

การส่งออกห้องสมุด

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

Browserify เป็นตัวรวบรวม require ซึ่งจำลองการทำงานของ Node.js สำหรับเบราว์เซอร์ ซึ่งหมายความว่าคุณจำเป็นต้องมีที่ที่ require ในการนำเข้าไลบรารีของคุณ เนื่องจากเราจำเป็นต้องส่งออกไลบรารีเหล่านั้นไปยัง Scala.js บันเดิลจึงสร้างอ็อบเจ็กต์ JavaScript ระดับบนสุดที่ชื่อว่า Bundle ดังนั้น สิ่งที่คุณต้องทำคือแก้ไข lib.js ซึ่งส่งออกวัตถุ JavaScript และกำหนดให้ไลบรารีทั้งหมดของคุณเป็นฟิลด์ของวัตถุนี้

หากเราต้องการส่งออกไปยังไลบรารี Scala.js jQuery และ Lodash ในโค้ดหมายความว่า:

 module.exports = { "jquery": require("jquery-browserify"), "lodash": require("lodash") }

ตอนนี้ เพียงรัน bundle คำสั่ง จากนั้นไลบรารีจะถูกดาวน์โหลด รวบรวม และวางไว้ในบันเดิล พร้อมที่จะใช้ในแอปพลิเคชัน Scala.js ของคุณ

การเข้าถึงบันเดิล

จนถึงตอนนี้:

• คุณติดตั้งโปรเจ็กต์ย่อยบันเดิลในโปรเจ็กต์ Scala.js และกำหนดค่าอย่างถูกต้อง
• สำหรับไลบรารีใด ๆ ที่คุณต้องการ คุณเพิ่มใน package.json
• คุณต้องการพวกเขาใน lib.js
• คุณดำเนินการคำสั่ง bundle ล

ด้วยเหตุนี้ คุณจึงมีออบเจ็กต์ JavaScript ระดับบนสุดของ Bundle ซึ่งให้จุดเริ่มต้นทั้งหมดสำหรับไลบรารี ซึ่งพร้อมใช้งานเป็นฟิลด์ของอ็อบเจ็กต์นี้

ตอนนี้คุณพร้อมที่จะใช้กับ Scala.js แล้ว ในกรณีที่ง่ายที่สุด คุณสามารถทำสิ่งนี้เพื่อเข้าถึงไลบรารี:

 @js.native object Bundle extends js.Object { def jquery : js.Any = js.native def lodash: js.Any = js.native }

รหัสนี้ให้คุณเข้าถึงไลบรารีจาก Scala.js อย่างไรก็ตาม นี่ไม่ใช่วิธีที่คุณควรทำกับ Scala.js เนื่องจากไลบรารียังไม่ได้พิมพ์ คุณควรเขียนประเภท "facades" หรือ wrappers เพื่อให้คุณสามารถใช้ไลบรารี JavaScript ที่ไม่ได้พิมพ์เดิมในรูปแบบ scalish ที่พิมพ์ได้

ฉันไม่สามารถบอกคุณได้ว่าจะเขียนส่วนหน้าอย่างไรเพราะมันขึ้นอยู่กับไลบรารี JavaScript เฉพาะที่คุณต้องการห่อใน Scala.js ฉันจะแสดงเพียงตัวอย่างเพื่อให้การสนทนาสมบูรณ์ โปรดตรวจสอบเอกสารอย่างเป็นทางการของ Scala.js สำหรับรายละเอียดเพิ่มเติม นอกจากนี้ คุณสามารถดูรายชื่ออาคารที่มีอยู่และอ่านซอร์สโค้ดเพื่อหาแรงบันดาลใจ

จนถึงตอนนี้ เราได้ครอบคลุมกระบวนการสำหรับไลบรารีที่ยังไม่ได้แมปตามอำเภอใจ ในส่วนที่เหลือของบทความ ฉันหมายถึงห้องสมุดที่มีส่วนหน้าที่มีอยู่แล้ว ดังนั้นการสนทนาจึงเป็นเพียงตัวอย่างเท่านั้น

การห่อ JavaScript API ใน Scala.js

เมื่อคุณใช้ require ใน JavaScript คุณจะได้รับอ็อบเจ็กต์ที่สามารถเป็นได้หลายอย่าง อาจเป็นฟังก์ชันหรือวัตถุก็ได้ มันอาจจะเป็นแค่สตริงหรือบูลีนก็ได้ ซึ่งในกรณีนี้ ความ require จะถูกเรียกใช้สำหรับผลข้างเคียงเท่านั้น

ในตัวอย่างที่ฉันทำ jquery เป็นฟังก์ชันที่ส่งคืนอ็อบเจ็กต์ซึ่งมีวิธีการเพิ่มเติม การใช้งานทั่วไปคือ jquery(<selector>).<method> นี่เป็นการทำให้เข้าใจง่ายขึ้น เนื่องจาก jquery ยังอนุญาตให้ใช้ $.<method> แต่ในตัวอย่างแบบง่ายนี้ ฉันจะไม่ครอบคลุมกรณีเหล่านั้นทั้งหมด หมายเหตุ โดยทั่วไป สำหรับไลบรารี JavaScript ที่ซับซ้อน API ทั้งหมดไม่สามารถจับคู่กับประเภท Scala แบบคงที่ได้อย่างง่ายดาย คุณอาจต้องหันไปใช้ js.Dynamic โดยให้อินเทอร์เฟซแบบไดนามิก (ไม่ได้พิมพ์) กับวัตถุ JavaScript

ดังนั้น เพื่อจับเฉพาะกรณีการใช้งานทั่วไป ฉันได้กำหนดไว้ในวัตถุ Bundle jquery :

 def jquery : js.Function1[js.Any, Jquery] = js.native

ฟังก์ชันนี้จะส่งคืนวัตถุ jQuery อินสแตนซ์ของคุณลักษณะในกรณีของฉันกำหนดด้วยวิธีเดียว (การทำให้เข้าใจง่าย คุณสามารถเพิ่มของคุณเองได้):

 @js.native trait Jquery extends js.Object { def text(arg: js.Any): Jquery = js.native }

สำหรับไลบรารี Lodash เราจำลองไลบรารีทั้งหมดเป็นออบเจกต์ JavaScript เนื่องจากเป็นชุดของฟังก์ชันที่คุณสามารถเรียกใช้ได้โดยตรง:

 def lodash: Lodash = js.native

โดยที่ลักษณะ lodash มีดังต่อไปนี้ (เช่น การทำให้เข้าใจง่ายขึ้นด้วย คุณสามารถเพิ่มวิธีการของคุณได้ที่นี่):

 @js.native trait Lodash extends js.Object { def camelCase(arg: js.Any): String = js.native }

ด้วยการใช้คำจำกัดความเหล่านี้ ในที่สุดเราก็สามารถเขียนโค้ด Scala โดยใช้ไลบรารี jQuery และ Lodash พื้นฐาน ทั้งสองโหลดจาก NPM แล้วจึงเรียกดู:

 object Main extends JSApp { def main(): Unit = { import Bundle._ jquery("#title").text(lodash.camelCase("This is a test")) } }

คุณสามารถตรวจสอบตัวอย่างทั้งหมดได้ที่นี่

บทสรุป

ฉันเป็นนักพัฒนา Scala และรู้สึกตื่นเต้นเมื่อค้นพบ Scala.js เพราะฉันสามารถใช้ภาษาเดียวกันได้ทั้งเซิร์ฟเวอร์และไคลเอนต์ เนื่องจาก Scala คล้ายกับ JavaScript มากกว่า Java ดังนั้น Scala.js จึงค่อนข้างง่ายและเป็นธรรมชาติในเบราว์เซอร์ นอกจากนี้ คุณยังสามารถใช้คุณสมบัติอันทรงพลังของ Scala เป็นคอลเลกชั่นไลบรารี มาโคร และ IDE อันทรงพลังและเครื่องมือสร้างมากมาย ข้อดีที่สำคัญอื่นๆ คือ คุณสามารถแบ่งปันรหัสระหว่างเซิร์ฟเวอร์และไคลเอนต์ได้ มีหลายกรณีที่คุณสมบัตินี้มีประโยชน์ หากคุณใช้ทรานสปิลเลอร์สำหรับ Javascript เช่น Coffeescript, Babel หรือ Typescript คุณจะไม่เห็นความแตกต่างมากเกินไปเมื่อใช้ Scala.js แต่ยังมีข้อดีอีกมากมาย เคล็ดลับคือการนำสิ่งที่ดีที่สุดของแต่ละโลกมารวมกันเพื่อให้แน่ใจว่าพวกเขาจะทำงานร่วมกันอย่างดี