Convert یا تبدیل کردن Asset ها در فریمورک Yii

توسعه دهندگان اغلب به جای نوشتن کد CSS یا JS از ساختار دستورات گسترش یافته (extended syntax) استفاده می کنند. به عنوان مثال ساختارهای LESS ، SCSS برای فایل های css و ساختارهای TypeScript و CoffeeScript برای جاوااسکریپت استفاده می شوند. سپس آنها از ابزارهای ویژه ای برای تبدیل این فایل ها به CSS و JS واقعی استفاده می کنند.

asset manager در فریمورک Yii به طور خودکار، asset ها در ساختار گسترش یافته را به CSS و JS تبدیل می کند. هنگامی که یک view رندر می شود، این صفحه شامل فایل های CSS و JS می باشد که به جای assetهای اصلی، در ساختار گسترش یافته، در صفحه قرار می گیرند.

مرحله 1 - فایل DemoAsset.php را به صورت زیر ویرایش کنید.

<?php
   namespace app\assets;
   use yii\web\AssetBundle;
   use yii\web\View;
   class DemoAsset extends AssetBundle {
      public $basePath = '@webroot';
      public $baseUrl = '@web';
      public $js = [
         'js/demo.js',
         'js/greeting.ts'
      ];
      public  $jsOptions = ['position' => View::POS_HEAD];
   }
?>

همانطور که مشاهده می کنید ما فقط یک فایل typescript اضافه نمودیم.

مرحله 2 - در داخل دایرکتوری web / js یک فایل با نام greeting.ts با کد زیر ایجاد کنید.

class Greeter {
   constructor(public greeting: string) { }
   greet() {
      return this.greeting;
   }
};
var greeter = new Greeter("Hello from typescript!");
console.log(greeter.greet());

در کد بالا، یک کلاس Greeter را با یک متد greet () تعریف نمودیم.

مرحله 3 - به آدرس http: // localhost: 8080 / index.php بروید. همانطور که در تصویر زیر مشاهده می کنید فایل greeting.ts به فایل greeting.js تبدیل می شود.

همانطور که مشاهده می کنید خروجی به شکل زیر نمایش داده می شود.