Yii - Conversion d'actifs

Au lieu d'écrire CSS ou JS code, les développeurs utilisent souvent une syntaxe étendue, comme LESS, SCSS,Stylet pour CSS et TypeScript, CoffeeScript pour JS. Ensuite, ils utilisent des outils spéciaux pour convertir ces fichiers en vrais CSS et JS.

Le gestionnaire d'actifs de Yii convertit automatiquement les actifs dans une syntaxe étendue en CSS et JS. Lorsque la vue est rendue, elle inclura les fichiers CSS et JS dans la page, au lieu des actifs d'origine dans la syntaxe étendue.

Step 1 - Modifier le DemoAsset.php classer de cette façon.

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

Nous venons d'ajouter un fichier dactylographié.

Step 2 - À l'intérieur du web/js répertoire, créez un fichier appelé greeting.ts avec le code suivant.

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

Dans le code ci-dessus, nous définissons une classe Greeter avec une seule méthode greet(). Nous écrivons notre message d'accueil sur la console Chrome.

Step 3 - Aller à l'URL http://localhost:8080/index.php. Vous remarquerez que legreeting.ts Le fichier est converti en fichier salutation.js comme indiqué dans la capture d'écran suivante.

Voici la sortie.