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://127.0.0.1:8080/index.php**。你会注意到 **greeting.ts** 文件已转换为 **greeting.js** 文件，如下面的屏幕截图所示。

输出如下所示。