Yii - Conversão de Ativos

Em vez de escrever CSS ou JS código, os desenvolvedores costumam usar sintaxe estendida, como LESS, SCSS,Stylus para CSS e TypeScript, CoffeeScript para JS. Em seguida, eles usam ferramentas especiais para converter esses arquivos em CSS e JS reais.

O gerenciador de ativos no Yii converte ativos em sintaxe estendida em CSS e JS, automaticamente. Quando a visualização é renderizada, ela inclui os arquivos CSS e JS na página, em vez dos ativos originais na sintaxe estendida.

Step 1 - Modifique o DemoAsset.php arquivar desta forma.

<?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];
   }
?>

Acabamos de adicionar um arquivo typescript.

Step 2 - Dentro do web/js diretório, crie um arquivo chamado greeting.ts com o seguinte código.

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

No código acima, definimos uma classe Greeter com um único método greet(). Escrevemos nossa saudação ao console do Chrome.

Step 3 - Vá para o URL http://localhost:8080/index.php. Você vai notar que ogreeting.ts O arquivo é convertido no arquivo greeting.js, conforme mostrado na captura de tela a seguir.

A seguir será a saída.