Yii - 資源轉換

開發者通常使用擴充套件語法（如 **LESS、SCSS、Stylus** 用於 CSS，以及 **TypeScript、CoffeeScript** 用於 JS），而不是編寫 **CSS** 或 **JS** 程式碼。然後，他們使用特殊的工具將這些檔案轉換為真正的 CSS 和 JS。

Yii 中的資源管理器會自動將擴充套件語法的資源轉換為 CSS 和 JS。渲染檢視時，它將在頁面中包含 CSS 和 JS 檔案，而不是原始的擴充套件語法資源。

**步驟 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());

在上面的程式碼中，我們定義了一個帶有單個方法 **greet()** 的 Greeter 類。我們將問候語寫入 Chrome 控制檯。

**步驟 3** - 訪問 URL **https://:8080/index.php**。你會注意到 **greeting.ts** 檔案已轉換為 **greeting.js** 檔案，如下面的螢幕截圖所示。

輸出如下所示。