README

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

安装

*需要PHP >= 7.1

*需要ischenko/yii2-jsloader >= 1.3

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

运行以下命令之一

composer require ischenko/yii2-jsloader-systemjs

或

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

将其添加到composer.json文件的require部分。

使用方法

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

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

加载器接受以下选项

• extras: 数组 要加载的系统Js额外内容列表。可能的值包括
  • amd
  • transform
  • named-exports
  • named-register
  • global
  • module-types
• minimal: 布尔值 表示是否加载库的核心版本（s.js）或完整版本（system.js）
• position: 整数 库和导入映射应该添加的位置
• renderer: 字符串|数组 JS表达式渲染器对象的配置

    ...
    'components' => [
        ...
        'view' => [
            'as jsLoader' => [
                'class' => 'ischenko\yii2\jsloader\Behavior',
                'loader' => [
                    'minimal' => false,
                    'extras' => ['amd'],
                    'position' => \yii\web\View::POS_HEAD,
                    'class' => 'ischenko\yii2\jsloader\SystemJs',
                ]
            ]
        ]
        ...
    ]
    ...

可以从资产包设置别名、导出、初始化选项

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

    public $jsOptions
        = [
            'systemjs' => [
                'alias' => 'jqff',
                'exports' => 'jquery_firefly'
            ]
        ];

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

生成的导入映射将如下所示

{
  "imports": {
    "jqff": "/pub/assets/dir/jquery.firefly.min.js"
  }
}

页面上将用以下方式包装JS代码

System.import("yii\\web\\JqueryAsset").then(function() {
    System.import("jqff").then(function(__sjs_module_1) {
        var jquery_firefly = __sjs_module_1.default;

        // page code goes here
    });
});

请注意 别名仅在客户端代码中工作。在服务器端，您仍然需要使用实际的模块名称进行操作。