Реактивная сборка производства отличается от разработки |полифилл не запускается

Question

Я запустил npx create-react-app . и импортировал clip-path вручную.Разработка сборки работает без проблем, но производственная, похоже, не работает.Проблема одинакова для IE11 и Edge44

Действия для воспроизведения:

1. npx create-react-app .
2. добавьте "т.е. 11" к browserslist в package.json для prod и dev
3. npm i react-app-polyfill
4. в index.js добавьте import 'react-app-polyfill/ie11'; import 'react-app-polyfill/stable';
5. Возьмите shapes-polyfill.js из css-shape-polyfill и вставьте скрипт в .index.html > head, а также добавьте браузер polyfill.

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
<script src='shapes-polyfill.js'></script>

включает <style> в index.html > head

<style>
#polygon-shape-outside {
  width: 200px;
  height: 200px;
  float: left;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200px' height='200px'><polygon points='0,0 142,33 89,141 0,200' fill='rgba(0,0,255, 0.25)'/></svg>");
  shape-outside: polygon(0px 0px, 142px 33px, 89px 141px, 0px 200px);
}
</style>

Вставить div в App

<div style={{
  width: 400,
  fontSize: 10,
  background: 'grey'
}}>
  <div id="polygon-shape-outside"></div>
  <p>Pelicans are a genus of large water birds comprising the family Pelecanidae. They are characterised by a long beak and large throat pouch used for catching prey and draining water from the scooped up contents before swallowing. They have predominantly pale plumage, the exceptions being the Brown and Peruvian Pelicans. The bills, pouches and bare facial skin of all species become brightly coloured before the breeding season. The eight living pelican species have a patchy global distribution, ranging latitudinally from the tropics to the temperate zone, though they are absent from interior South America as well as from polar regions and the open ocean. Fossil evidence of pelicans dates back at least 30 million years, to the remains of a beak very similar to that of modern species recovered from Oligocene strata in France.</p>
</div>

Answer 1

Изображение не показывалось в IE, потому что IE строго по SVG.Вы можете обратиться к этому Блогу Codepen за подробностями, и вот пункты:

• Большинство браузеров снисходительно относятся к строке charset=, но это требуется для Internet Explorer.Это означает, что вам нужно использовать ;charset=utf8, вместо ;utf8,.
• . Вам придется кодировать символы, которые не являются URL-безопасными.Например, от <svg> до %3Csvg%3E.Вы можете минимизировать объем кодирования в процентах, который необходимо выполнить, используя одинарные кавычки ' вместо двойных кавычек ".

В соответствии с этим я изменил некоторые части вашего кода в <style> из index.html:

#polygon-shape-outside {
    width: 200px;
    height: 200px;
    float: left;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200px' height='200px'%3E%3Cpolygon points='0,0 142,33 89,141 0,200' fill='rgba(0,0,255, 0.25)'/%3E%3C/svg%3E");
    shape-outside: polygon(0px 0px, 142px 33px, 89px 141px, 0px 200px);
  }

Тогда он может хорошо работать в режиме dev во всех браузерах.

О разнице между режимом dev и режимом prod: добавьте data-shape-outside="polygon(0px 0px, 142px 33px, 89px 141px, 0px 200px)" in <div id="polygon-shape-outside">.Затем содержимое будет обернуто вокруг изображения, и страница будет работать одинаково и в обоих режимах, и во всех браузерах.