如何在瀏覽器上使用 styled-components CDN 構建？

Question

索引.html

我從以下位置獲取 CDN 文件：

<script src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/4.3.2/styled-components-macro.cjs.min.js"></script>

如何訪問styled化功能？

const {styled} = window.styled-components不起作用。

Answer 1

對於版本 5，如文檔中所述，您現在需要在styled-components之前包含react-is

<!-- react, react-dom dev bundles -->
<script crossorigin src="//unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="//unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<!-- react-is -->
<script crossorigin src="//unpkg.com/react-is/umd/react-is.production.min.js"></script>

<!-- styled-components -->
<script crossorigin src="//unpkg.com/styled-components/dist/styled-components.min.js"></script>

<script>
  const Component = window.styled.div`background-color: green;`;
</script>

Answer 2

styled-components-macro.cjs.min.js不是UMD ，因此如果包含此文件，則不會獲得全局變量。

如果您不使用模塊捆綁器或包管理器，我們還有一個托管在 unpkg CDN 上的全局（“UMD”）構建。 只需將以下<script>標記添加到 HTML 文件的底部：

<script src="//unpkg.com/styled-components/dist/styled-components.min.js"></script>

添加styled-components后，您將可以訪問全局window.styled變量。

const Component = window.styled.div`
  color: red;
`

來源： https ://www.styled-components.com/docs/basics#installation

---

來自 OP 的更新：

較新的版本已從上面的 URL 停止工作（可能是 v5）。 但它在 v4 上仍然像這樣工作：

<script src="//unpkg.com/styled-components@4.0.1/dist/styled-components.min.js"></script>