Yii - Conversione delle risorse

Invece di scrivere CSS o JS codice, gli sviluppatori usano spesso una sintassi estesa, come LESS, SCSS,Stylus per CSS e TypeScript, CoffeeScript per JS. Quindi usano strumenti speciali per convertire questi file in CSS e JS reali.

Il gestore di risorse in Yii converte automaticamente le risorse in sintassi estesa in CSS e JS. Quando viene eseguito il rendering della vista, includerà i file CSS e JS nella pagina, invece delle risorse originali con sintassi estesa.

Step 1 - Modifica il file DemoAsset.php archiviare in questo modo.

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

Abbiamo appena aggiunto un file dattiloscritto.

Step 2 - All'interno del web/js directory, crea un file chiamato greeting.ts con il seguente codice.

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

Nel codice sopra, definiamo una classe Greeter con un unico metodo greet(). Scriviamo il nostro saluto alla console di Chrome.

Step 3 - Vai all'URL http://localhost:8080/index.php. Noterai che il filegreeting.ts viene convertito nel file greeting.js come mostrato nello screenshot seguente.

Di seguito sarà l'output.