README

配置

创建一个 YAML 文件

您可以将 Resources/sample/config.yaml 复制到您的应用中（例如 /frontend/polyfill/config.yaml）。

您可以通过在您的应用中覆盖这些参数来配置此路径。

parameters:
    cws.polyfill.config_path: /frontend/polyfill/config.yaml

通过在此配置文件中设置 active: true 来激活您需要的 polyfill。

服务

在您的 services.yaml 的导入部分添加此行

imports:
    - { resource: '@CwsFrontPolyfillBundle/Resources/config/services.xml' }

JavaScript 支持测试

获取活动 polyfill 列表

使用对象列表

{% set polyfillList = get_front_polyfill_list() %}

<script>
var myPolyfillArray = [
{%- for name, polyfill in polyfillList.list -%}
    {
        "test": {{ polyfill.test|raw }},
        "name": "{{ name|raw }}"
    }{{ loop.last ? '' : ',' }}
{%- endfor -%}
];
</script>

使用类似 JS 数组的字符串

var myPolyfillArray = {{ get_front_polyfill_list('js') }};

这将给出

var myPolyfillArray = [
    {
        "test": test1,
        "name": "test1"
    },{
        "test": test2,
        "name": "test2"
    },
    ...
];

您可以通过更改属性名称来更改名称

var myPolyfillArray = {{ get_front_polyfill_list('js', 'a', 'b') }};

结果是

var myPolyfillArray = [{
        "b": test1,
        "a": "test1"
    },{
        "b": test2,
        "a": "test2"
    },
    ...
];

以下是一个创建类似 'js/pf1-pf2-pf3.js' 的 URL 的完整示例

{% set polyfillArrayString = get_front_polyfill_list('js') %}

<script>
    let polyfillContentUrl;

    {%- if polyfillArrayString is defined and polyfillArrayString|length > 2 -%}
        let neededPolyfill = [];

        {{ polyfillArrayString }}
            .forEach( function( polyfill ) {
                if (typeof polyfill.test === 'function' && polyfill.test() ||
                    typeof polyfill.test !== 'function' && polyfill.test) {
                    neededPolyfill.push( polyfill.name );
                }
            });

        if ( neededPolyfill.length ) {
            polyfillContentUrl = `js/${ neededPolyfill.join( '-' ) }.js`;
        }
    {%- endif -%}

    [
        polyfillContentUrl,
        '1.js',
        '2.js'
    ].forEach( function( src ) {
        if ( !src ) {
            return;
        }
        var script = document.createElement('script');
        script.src = src;
        script.async = false;
        document.head.appendChild(script);
    } );
</script>

Polyfill 加载

使用测试数组创建一个加载 polyfill 内容的 URL。

有两种方式可以加载 polyfill

1/ Polyfill 名称包含在文件名中，并通过 - 分隔

这是 推荐的方法，因为它允许您 创建一个真实文件。与 Symfony 一起使用时，如果文件存在，则 不会重新渲染。

<script src="js/polyfill-domch-eachnl-picture.js"></script>

在渲染 polyfill-domch-eachnl-picture.js 响应的 Twig 文件内部（如果需要，请保存文件）

{{ get_front_polyfill_content()|raw }}

// Other stuff in JS

此文件的路径 必须 包含占位符。默认名称为 polyfill_list。因此，在我们的例子中，/js/polyfill-domch-eachnl-picture.js 的路由必须是 /js/polyfill-{polyfill_list}.js

您可以在 parameters.yaml 中配置占位符名称

parameters:
    cws.polyfill.route_placeholder: polyfill_list

当存在清除缓存的操作时，建议同时删除这些生成的文件。

2/ Polyfill 名称包含在查询字符串中，并通过 & 分隔

<script src="js/polyfill.js?domch&eachnl&picture"></script>

您必须使用 get_front_polyfill_content TWIG 函数的 query 参数来指定它。

在渲染 polyfill.js 响应的 Twig 文件内部

{{ get_front_polyfill_content('query')|raw }}

// Other stuff in JS