PureScript را با برنامه JavaScript خود ادغام کنید

PureScript یک زبان برنامه‌نویسی است که به JavaScript کمپایل می‌شود. این به این معنی است که می‌توانیم از type safety، نه تنها در برنامه‌های جدید، بلکه در برنامه‌های پیشین خود نیز بهره ببریم.

PureScript دارای یک FFI (رابط تابع خارجی = Foreign-Function Interface) دارد که ما را قادر می‌سازد تا توابع JavaScript را از داخل PureScript فراخوانی کنیم. همچنین می‌توانیم از ماژول‌های PureScript نیز استفاده کنیم.

نصب PureScript

در ابتدا، باید Dependencyهای Global را نصب کنیم؛ یعنی کمپایلر PureScript، ابزار مدیریت پکیج و ابزار ساخت:

Yarn global add purescript@0.11.7 psc-package pulp

تولید ساختار PureScript

ابزار ساخت، یعنی Pulp ما را قادر می‌سازد تا یک ساختار پروژه پایه را با اجرای دستور pulp --psc-package init بسازیم.

این دستور، شاخه‌های src و test را به همراه فایل psc-package.json کهشامل لیستی از Dependencyها است، می‌سازد. پس از این که این موارد ساخته شدند، Pulp پکیج‌های PureScript را در شاخه .psc-package نصب خواهد کرد.

حال می‌توانید با تایپ کردن دستور pulp --watch run، فایل src/Main.purs را کمپایل کرده و اجرا کنید. Pulp پس از ویرایش محتویات فایل src/Main.purs، به طور خودکار ماژول مورد نظر را مجددا کمپایل کرده و اجرا می‌کند.

نصب اتصال دهنده کد

از آنجایی که می‌خواهیم یک برنامه JavaScript بسازیم که با PureScript‌ ادغام می‌شود، یک اتصال دهنده کد کاربردی خواهد بود.

Parcel به شما کمک می‌کند تا به راحتی کد ES6 را Transpile کنید، ماژول‌ها را اتصال دهید و به طور خودکار کد خود رادر مرورگر،‌ بدون هیچ‌گونه پیکربندی اضافه، مجددا بارگذاری کنید. می‌توانید با استفاده از دستور yarn add parcel، آن را نصب کنید.

تعریف npm script و اجرای اتصال دهنده

پس از این که آن را نصب کردید، معمولا اضافه کردن یک اسکریپت به فایل package.json یک تمرین خوب است، تا به سادگی بتوانیم اتصال دهنده را اجرا کنیم. ما اسکریپت dev را تعریف خواهیم کرد، که پس از اجرای کد yarn run dev در ترمینال، کد را اتصال می‌دهد و برنامه را بر روی پورت 1234 اجرا می‌کند.

سپس، فایلی به نام src/index.html می‌سازیم و این کد را قرار می‌دهیم:

// package.json
"scripts": {
  "dev": "parcel serve src/index.html"
}

حال نیز فایلی به نام src/index.js می‌سازیم و این کد را قرار می‌دهیم:

<!-- src/index.html -->

<html>
  <head>
    <title>PureScript Application</title>
  </head>
  <body>
    <script src="./index.js"></script>
  </body>
</html>

و سپس نیز فایل src/index.js:

// src/index.js

console.log('Hello from JavaScript');

حال پس از اجرای دستور yarn run dev، یک برنامه پایه JavaScript بر روی http://localhost:1234/ اجرا می‌شود.

فراخوانی PureScript از JavaScript

حال به قدم آخر می‌رسیم. ما می‌خواهیم کد PureScript را از فایل src/Main.purs در برنامه JavaScript خود اجرا کنیم؛ و همچنان می‌خواهیم که کد yarn run dev در پس زمینه اجرا شود.

گرچه، به جای تایپ کد pulp --watch run و اجرای کد PureScript، از کد pulp --watch build برای ساخت کد و رد کردن بخش اجرا، استفاده می‌کنیم.

ماژول PureScript

حال که هر دو دستور در پس‌زمینه اجرا می‌شوند، می‌توانیم نگاهی به ماژول src/Main.purs داشته باشیم.

module Main where

import Prelude
import Control.Monad.Eff (Eff)
import Control.Monad.Eff.Console (CONSOLE, log)

main :: forall e. Eff (console :: CONSOLE | e) Unit
main = do
  log "Hello from PureScript!"

اساسا، می‌توانیم بگوییم که این ماژول Main نام دارد و فقط یک متد به نام main را در خود دارد. این متد چندین ماژول دیگر را وارد می‌کند،‌ تا به کمپایلر بگوید که تابع main همچنان موثر است . بخش خاصی از این اثر، در کنسول JavaScript است. همچنین این ماژول تابع log را وارد می‌کند، که یک رشته را گرفته، و در کنسول JavaScript چاپ می‌کند. تابع main هیچ مقداری را تولید نمی‌کند.

وارد کردن ماژول

سپس، پس از این که ماژول PureScript را درک کردیم، می‌توانیم خروجی کمپایل شده را از فایل JavaScript وارد کنیم.

// src/index.js
const Main = require('../output/Main/index');

console.log('Hello from JavaScript');

Main.main();

پس از این که مجددا صفحه مرورگر را باز کردیم، می‌توانیم هر دو کد JavaScript که به صورت دستی نوشتیم و کد JavaScript که توسط کمپایلر PureScript کمپایل شده است را ببینیم، که اجرا شده‌اند و در کنار کنسول JavaScript چاپ شده‌اند.

حال کد JavaScript را با PureScript ادغام کردیم و آزاد هستیم تا به هر دو زبان شروع به کد نویسی کنیم. همچنین می‌توانیم به تدریج، در بخش‌هایی از Codebase خود، PureScript را معرفی کنیم تا بتوانیم این زبان را یاد بگیریم.