React 生产构建不同于开发 | polyfill 不运行

Question

我已经运行 npx create-react-app . 并手动导入了 clip-path。开发构建没有问题，但生产构建似乎不起作用。问题在 IE11 和 Edge44 上是一样的

重现步骤：

1. npx create-react-app .
2. 将“ie 11”添加到 browserslist 中的 package.json 用于生产和开发
3. npm i react-app-polyfill
4. 在index.js 添加import 'react-app-polyfill/ie11'; import 'react-app-polyfill/stable';
5. 从css-shapes-polyfill 中获取shapes-polyfill.js 并在.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>

6. 在index.html > head 中包含<style>

<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>

1. 在App 中插入 div

<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 对 SVG 有严格要求，所以图片没有在 IE 中显示。详情可以参考这个Codepen Blog，这里是要点：

• 大多数浏览器都对charset= 字符串宽容，但它是Internet Explorer 所必需的。这意味着您需要使用;charset=utf8, 而不是;utf8,。
• 您必须对不是 URL 安全的字符进行百分比编码。例如，<svg> 到 %3Csvg%3E。您可以通过使用单引号 ' 而不是双引号 " 来最小化需要完成的百分比编码量。

据此，我在index.html的<style>中更改了您的部分代码：

#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模式和prod模式的区别：在<div id="polygon-shape-outside">中添加data-shape-outside="polygon(0px 0px, 142px 33px, 89px 141px, 0px 200px)"。然后内容将环绕图像，页面在两种模式和所有浏览器中运行良好且完全相同。