Modernizr WebPack не возвращает правильные результаты обнаружения flexbox - PullRequest
Новая
       12

Modernizr WebPack не возвращает правильные результаты обнаружения flexbox

0 голосов
/ 20 сентября 2018

Требуемое поведение

Проверьте, поддерживает ли браузер пользователя flexbox, и выполните соответствующую обработку.

Что я пробовал

Я изучаю использование Modernizr с Flexbox и Flex Line Wrapping, то есть:

JS 

$(document).ready(function() {

    if (Modernizr.flexbox && Modernizr.flexwrap) {
        console.log("flexbox is supported");
    } else {
        console.log("flexbox is not supported");
    }

});

CSS 

.no-flexwrap .box { color: red; }
.flexwrap .box { color: green; }

Для установки Modernizr I:

  • отмените выделение minifiedопция
  • выбрала эти detects

  • нажала Build и сохранила файл как

    src/js/modernizr_flex_check.js.

Комментарии вверху загруженного файла: 

/*!
 * modernizr v3.6.0
 * Build https://modernizr.com/download?-flexbox-flexwrap-setclasses-dontmin
 ....
*/

Я импортировал этот файл в /src/js/common.js с: 

import Modernizr from './modernizr_flex_check';

Я запустилмой веб-пакет со следующими настройками, и он успешно завершен:

webpack.config.json 

rules: [{
        test: /\.js$/,
        use: {
            loader: "babel-loader",
            options: {
                presets: ["env", "stage-0"]
            }
        }
    },

.babelrc 

{
    "presets": [
        "env",
        "stage-0"
    ]
}

Когда я загружаю страницу в среде, которая, как мне известно, поддерживает flex: 

Windows 10 Professional, Chrome Version 69.0.3497.100 (Official Build) (64-bit)

Моя условная проверка возвращается: 

flexbox is not supported

Однако тег <html>: 

<html lang="en" class=" flexbox flexwrap">

Обновление:

Если я закомментирую: 

import Modernizr from './modernizr_flex_check';

И вместо этого непосредственно включу его в мой файл index.html: 

<script src="/js/modernizr_flex_check.js"></script>
<script src="/js/bundle.js"></script>

Затем условное выражение возвращает правильные результаты и классы применяются к тегу <html>: 

<html lang="en" class=" flexbox flexwrap">

Так что, похоже, что-то идет не так при попыткеимпортировать его и запустить на нем веб-пакет

Обновление 2:

Кроме того, в нем говорится flexbox is supported in: 

iOS, v7
Safari

Однако я вижу, что он не поддерживается, пока Safariv9:

https://caniuse.com/#feat=flexbox

(Частичная поддержка с префиксом webkit недопустима в моем сценарии)

...