ischenko/yii2-jsloader-requirejs

一个允许通过RequireJS处理资产包的Yii2扩展

安装: 81

依赖者: 0

建议者: 0

安全性: 0

星标: 5

关注者: 2

分支: 2

开放问题: 0

类型:yii2-extension

v1.2.1 2020-02-25 10:50 UTC

This package is auto-updated.

Last update: 2024-09-16 20:14:19 UTC


README

Latest Stable Version Total Downloads Build Status Code Climate Test Coverage License

一个允许将资产包注册为RequireJS模块的Yii2扩展。

安装

* 需要 PHP >= 7.1

* 需要 ischenko/yii2-jsloader >= 1.2

安装此扩展的首选方式是通过 composer

运行以下命令:

composer require ischenko/yii2-jsloader-requirejs

或者将以下内容添加到您的 composer.json 文件的 require 部分:

"ischenko/yii2-jsloader-requirejs": "*"

使用方法

行为和requirejs加载器添加到视图配置

    ...
    'components' => [
        ...
        'view' => [
            'as jsLoader' => [
                'class' => 'ischenko\yii2\jsloader\Behavior',
                'loader' => [
                    'class' => 'ischenko\yii2\jsloader\RequireJs',
                ]
            ]
        ]
        ...
    ]
    ...

模块配置接受RequireJS API 文档中描述的选项。还可以为模块设置别名,例如

    ...
    'components' => [
        ...
        'view' => [
            'as jsLoader' => [
                'class' => 'ischenko\yii2\jsloader\Behavior',
                'loader' => [
                    'config' => [
                        'shim' => [
                            'yii\web\JqueryAsset' => [
                                'exports' => 'jQuery'
                            ],
                            'app\assets\jQueryFireflyAsset' => [
                                'deps' => ['yii\web\JqueryAsset']
                            ]
                        ],
                        'aliases' => [
                            'yii\web\JqueryAsset' => 'jq',
                            'app\assets\jQueryFireflyAsset' => 'jqff'
                        ]
                    ],
                    'class' => 'ischenko\yii2\jsloader\RequireJs',
                ]
            ]
        ]
        ...
    ]
    ...

或者您可以从资产包设置别名、exports、init选项

class jQueryFireflyAsset extends AssetBundle
{
    public $js
        = [
            'jquery.firefly.min.js'
        ];

    public $jsOptions
        = [
            'requirejs' => [
                'alias' => 'jqff',
                //'init' => 'function(jQuery) { /* do some init here */ }'
                //'exports' => 'some-exported'
            ]
        ];

    public $depends
        = [
            'yii\web\JqueryAsset',
        ];

        
//    public function registerAssetFiles($view)
//    {
//        parent::registerAssetFiles($view);
        
//        $this->jsOptions['requirejs']['init'] =<<<EOS
//function(jQuery) {
//    Or do some complex init... 
//}
//EOS;
//    }

}

这将生成以下输出

var require = {
    "shim": {
        "jq": {
            "exports": "jQuery"
        }, 
        "jqff": {
            "deps": ["jq"]
        }
    },
    "paths": {
        "jq": ["/assets/e7b76d86/jquery"],
        "jqff": ["/assets/4127fff7/jquery.firefly.min"]
    }
};

请注意别名仅在客户端代码中有效。在服务器端,您仍然需要使用实际的模块名称。