不同於寫CSS或JS代碼,開發人員經常使用擴展語法,如 LESS, SCSS, 手寫CSS和TypeScript,CoffeeScript。 然後需要使用專用工具將這些檔轉換成真正的CSS和JS。
Yii中 assets 資源管理轉換擴展語法自動注入CSS和JS。當視圖顯示,它將在頁面包函 CSS和JS檔,而不是在擴展語法原有 assets 資源。
第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.js 檔並使用下麵的代碼。
class Greeter {
constructor(greeting:string) { }
greet() {
return this.greeting;
}
};
var greeter = new Greeter("Hello From TypeScript!");
console.log(greeter.greet());
在上面的代碼中,我們定義了一個Greeter類並有一個 greet()方法。我們寫的問候語在Chrome控制臺中輸出。
注:需要安裝好 typescript 環境,執行類似命令:
tsc --sourcemap greeter.ts
將輸出以下內容:


上一篇:
Yii資源(Asset)
下一篇:
Yii擴展

