Yii - 资产转换

简述

开发人员通常不会编写CSS或JS代码，而是使用扩展语法，例如LESS、SCSS、 Stylus for CSS 和 TypeScript、CoffeeScript for 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];
   }
?>
```
我们刚刚添加了一个打字稿文件。

第 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 http://localhost:8080/index.php。您会注意到greeting.ts文件被转换为 greeting.js 文件，如以下屏幕截图所示。

以下将是输出。

Yii - 资产转换

简述