Yii2 used ts

Install sass, typescript, etc. in the operating environment vagrant Ubuntu box

Install the software needed:

sudo su -c "gem install sass" # 可选,安裝sass
sudo su -c "npm install -g typescript" # 可选,ts命令
sudo su -c "npm install -g less" # 可选,less命令
sudo su -c "npm install stylus -g" # 可选,stylus命令
sudo su -c "npm install -g coffee-script" # 可选,coffee命令

The above npmcommand depend on the system been installed ruby,node

Above gem, npm in the windows cmd command can be run

Using Advanced template, modify common/config/main.php(if a Basic template, modify the config/web.phpfile), the componentsadded array assetManagerelement configuration

 'assetManager' => [
            'converter' => [
                'class' => 'yii\web\AssetConverter',
                'commands' => [
                    'scss' => ['css', 'sass {from} {to} --sourcemap'],
                    // 其他命令
                    'less' => ['css', 'lessc {from} {to} --no-color --source-map'],
                    'sass' => ['css', 'sass {from} {to} --sourcemap'],
                    'styl' => ['css', 'stylus < {from} > {to}'],
                    'coffee' => ['js', 'coffee -p {from} > {to}'],
                    'ts' => ['js', 'tsc --out {to} {from}'],
                ],
            ],
        ],

FIG effect similar to the following:

Direct introduction of ts, sass files in AppAsset.php

class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
 
    public $css = [
        'css/index.scss', // 引入 scss 文件
    ];
    public $js = [
        'js/index.ts', //引入 ts 文件
    ];
    // 其他内容...
}

index.ts demonstration content

let myName = "hello";

The last page is automatically imported index.js, installed for the content is:

var myName = "hello";

When the above editing index.cssor index.tswill installed for the corresponding css or js files.

References

1. yii2 know how to use the ts
2. 5 minutes to get started TypeScript
3. Less use installation
4. Get styling with Stylus
5. CoffeeScript Chinese
6. Yii2- Resource Management (Assets) use of resources Converter