Yii-資産変換

開発者は、 CSS または JS コードを記述する代わりに、* LESS、SCSS、* CSSのStylus、TypeScript、JSのCoffeeScriptなどの拡張構文をよく使用します。次に、特別なツールを使用して、これらのファイルを実際の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];
   }
?>

typescriptファイルを追加しました。

ステップ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());

上記のコードでは、1つのメソッド* greet（）*でGreeterクラスを定義しています。挨拶をChromeコンソールに書き込みます。

ステップ3 *-URL *http：//localhost：8080/index.php に移動します。次のスクリーンショットに示すように、 greeting.ts ファイルがgreeting.jsファイルに変換されていることがわかります。

Greeting Ts File

出力は次のようになります。

Tsファイル出力の挨拶

Yii-asset-conversion

Yii-資産変換