是否可以在没有 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