Yii Assets转换


开发人员经常使用扩展语法,比如 LESS,SCSS, Stylus for CSS和TypeScript,以及CoffeeScript for JS, 而不是编写 CSSJS 代码。然后他们使用特殊工具将这些文件转换为真正的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类。我们写我们的问候到铬控制台。

第3步 - 转到URL http:// localhost:8080 / index.php 。您会注意到, greeting.ts 文件被转换为greeting.js文件,如以下屏幕截图所示。

问候Ts文件

以下将是输出。

问候Ts文件输出