是否可以在沒有 Webpack 的情況下直接將 Ant Design 與 Reactjs 結合使用到瀏覽器中？

Question

我有非常具體的場景，我在 ASP.NET Core 框架中配置了 React 單頁應用程序（SPA）。 除了 SPA，我在服務器上還有一些靜態 Razor 頁面，用於處理身份驗證和配置文件管理等工作。 我已經在我的 SPA 上嘗試過 Ant Design，它運行良好。 現在，我想通過直接在瀏覽器上的靜態 Razor 頁面中結合 Reactjs 使用 Ant Design，將 SPA 的布局與靜態頁面統一起來。

我知道在瀏覽器中使用 reactjs 是可能的，如此處所述https://reactjs.org/docs/add-react-to-a-website.html

在 Ant Design 文檔的Import in Browser一節中簡要提到可以將antd js 庫作為全局變量直接使用到瀏覽器中，雖然不推薦https://ant.design/docs/react/introduce ，但是我想知道是否有一些工作示例可以說明它是如何完成的。

在這里，我借助上述鏈接中的信息創建了一個最小示例：


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React and Ant Design browser example</title>

    <link rel="stylesheet" href="https://unpkg.com/antd@3.23.1/dist/antd.min.css"/>
</head>
<body>
    <div id="like_button_container"></div>

    <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/antd@3.23.1/dist/antd.min.js" crossorigin="anonymous"></script>

    <script>
        'use strict';
        const e = React.createElement;
        class LikeButton extends React.Component {
            constructor(props) {
                super(props);
                this.state = { liked: false };
            }

            render() {
                if (this.state.liked) {
                    return 'You liked this.';
                }

                return e(
                  'button',
                  { onClick: () => this.setState({ liked: true }) },
                  'Like'
                );
            }
        }

        let domContainer = document.querySelector('#like_button_container');
        ReactDOM.render(e(LikeButton), domContainer);
    </script>
</body>
</html>

通過在瀏覽器中打開上面的示例，我收到以下錯誤：

Panel.js:272 Uncaught TypeError: ef(...) is not a function
    at Module.i.m.a (Panel.js:272)
    at i (bootstrap:19)
    at Object.i.m.a (index.js:25)
    at i (bootstrap:19)
    at Object.i.m.a (antd.min.js:50)
    at i (bootstrap:19)
    at bootstrap:83
    at universalModuleDefinition:9
    at universalModuleDefinition:1

而且現在我仍然必須在示例中使用“antd”組件，但我不知道如何引用它們。 如果我執行以下操作，其中Button應該是全局分配的 antd 按鈕組件，它會抱怨“ ReferenceError: Button is not defined ”：

return e(
  Button,
  { onClick: () => this.setState({ liked: true }) },
  'Like'
 );

我會很感激一些如何使該示例運行的建議。

Answer 1

該線程是搜索“ant design react without webpack”時的第一個堆棧溢出問題。

這里有一個 React、ant design 和 babel（用於 jsx）的例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React and Ant Design browser example</title>

    <script src="https://unpkg.com/@babel/standalone/babel.min.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/antd@4.16.13/dist/antd.min.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://unpkg.com/antd@4.16.13/dist/antd.min.css"/>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        const App = () => {
            const [liked, setLiked] = React.useState(false);
            if (liked) return <p>You liked this</p>
            return <antd.Button type="primary" onClick={() => setLiked(true)}>Primary Button</antd.Button>
        };
    </script>
    <script type="text/babel">
        ReactDOM.render(<App />, document.getElementById('root')); 
    </script>  
</body>
</html>

Answer 2

這里是關於如何在沒有 webpack 的情況下在瀏覽器中使用 React 和 antd 的文檔。

https://ant.design/docs/react/introduce#Import-in-Browser https://reactjs.org/docs/add-react-to-a-website.html

是否可以在沒有 Webpack 的情況下直接將 Ant Design 與 Reactjs 結合使用到瀏覽器中？

問題描述

2 個解決方案

解決方案1
0 2021-10-26 06:57:38

解決方案2
-1 2019-12-20 07:10:59

是否可以在沒有 Webpack 的情況下直接將 Ant Design 與 Reactjs 結合使用到瀏覽器中？

問題描述

2 個解決方案

解決方案1 0 2021-10-26 06:57:38

解決方案2 -1 2019-12-20 07:10:59

解決方案1
0 2021-10-26 06:57:38

解決方案2
-1 2019-12-20 07:10:59