README

该包解析名为 modern 的配置的 .browserslistrc 文件。然后提供 PHP 服务和 Twig 方法来将用户代理字符串与该配置进行比较。

它使用由 @donatj 开发的一个优秀、轻量级且快速的 用户代理解析库。

目标是确定请求响应的浏览器在 JavaScript 和 CSS 功能方面是否“现代”。

您可以使用它来提供不同的前端构建，并通过为现代浏览器提供更少的 polyfills、供应商前缀以及其他由 .broserslistrc 处理的内容来节省宝贵的带宽。

安装

composer require barthy-koeln/browserslist-check-bundle

配置

您的 .browserslistrc 文件应如下所示

[modern]
Chrome >= 97
Edge >= 97
Firefox >= 91
Safari >= 14.1
Opera >= 82
iOS >= 14.5
Samsung >= 15
ChromeAndroid >= 100
FirefoxAndroid >= 98
Android >= 99

[legacy]
defaults
ie 11
safari >= 13
iOS >= 13

重要注意事项

• [modern] 配置必须位于顶部
• 该构建中的约束条件必须仅使用 >= 操作符将浏览器名称映射到最小版本。版本更高或相等的浏览器被认为是“现代”。

缓存浏览器配置

当 Symfony 构建缓存时，您的 .browserslistrc 文件将被解析并内联为 PHP 数组。

爬虫和机器人

此包识别一些能够处理 JavaScript 的常青爬虫，并将它们处理为其浏览器对应版本（例如，Chrome 用于 Googlebot，Edge 用于 Bingbot）。

简单用法

<script src="/build/{{ is_modern_browser() ? 'modern' : 'legacy' }}.js" type="application/javascript"></script>

<?php

use BarthyKoeln\BrowserslistCheckBundle\DependencyInjection\BrowserslistCheck;

public function someControllerAction(BrowserslistCheck $browserslistCheck)
{
    $isModern = $browserslistCheck->isModern();
    $isModern = $browserslistCheck->isModern('Explorer', 9); // pls no
}

只有在调用不带任何参数的 isModern 方法时，才会进行用户代理解析。

高级 Symfony、Webpack Encore 和资产管理用法

文件: config/packages/assets.yaml

framework:
  assets:
    packages:
      modern:
        json_manifest_path: '%kernel.project_dir%/public/build/modern/manifest.json'
      legacy:
        json_manifest_path: '%kernel.project_dir%/public/build/legacy/manifest.json'

文件: config/packages/webpack_encore.yaml

webpack_encore:
  output_path: false

  builds:
    modern: '%kernel.project_dir%/public/build/modern/'
    legacy: '%kernel.project_dir%/public/build/legacy/'

  # enable this in config/packages/prod
  #cache: false

文件: config/packages/prod/webpack_encore.yaml

webpack_encore:
  cache: true

文件: webpack.config.js

const Encore = require('@symfony/webpack-encore')
const buildType = process.env.BROWSERSLIST_ENV
const isModern = buildType === 'modern'

Encore
  // [...]

  .setOutputPath(`public/build/${buildType}/`)
  .setPublicPath(`/build/${buildType}`)
  .setManifestKeyPrefix(`build/${buildType}`)

  // [...]

  // Not required, but ie10 & ie11 have some trouble with data-uris
  .configureImageRule({
    type: isModern ? 'asset' : 'asset/resource',
    maxSize: isModern ? 8 * 1024 : undefined,
    filename: 'images/[name].[contenthash][ext]'
  })

// [...]

文件: package.json

{
  /* [...] */
  "scripts": {
    "dev": "BROWSERSLIST_ENV=modern encore dev",
    "watch": "BROWSERSLIST_ENV=modern encore dev --watch",
    "build_modern": "BROWSERSLIST_ENV=modern encore production",
    "build_legacy": "BROWSERSLIST_ENV=legacy encore production",
    "build": "yarn build_modern && yarn build_legacy"
  }
  /* [...] */
}

文件: 任何基本 Twig 模板

{% set buildType = is_modern_browser() ? 'modern' : 'legacy' %}

{% block stylesheets %}
    {{ encore_entry_link_tags('css/header', null, buildType) }}
{% endblock %}

{% block javascripts %}
    {{ encore_entry_link_tags('css/main', null, buildType) }}
    
    {% for file in encore_entry_js_files('js/main', buildType) %}
        <script defer
                src="{{ file }}"
                type="application/javascript"
        ></script>
    {% endfor %}
{% endblock %}