是否可以在没有 Webpack 的情况下直接将 Ant Design 与 Reactjs 结合使用到浏览器中？

Question

I have very specific scenario where I have create-react-app configured React Single Page Application(SPA) within the ASP.NET Core framework.我有非常具体的场景，我在 ASP.NET Core 框架中配置了 React 单页应用程序（SPA）。 Along with the SPA I have some static Razor pages on the server taking care of some stuff such as authentication and profile management.除了 SPA，我在服务器上还有一些静态 Razor 页面，用于处理身份验证和配置文件管理等工作。 I have already tried Ant Design with my SPA and it works fine.我已经在我的 SPA 上尝试过 Ant Design，它运行良好。 Now I would like to unify the layout of my SPA with my static pages by using Ant Design directly on the browser in my static Razor pages in combination with Reactjs.现在，我想通过直接在浏览器上的静态 Razor 页面中结合 Reactjs 使用 Ant Design，将 SPA 的布局与静态页面统一起来。

I know that using reactjs in the browser is possible as described here https://reactjs.org/docs/add-react-to-a-website.html我知道在浏览器中使用 reactjs 是可能的，如此处所述https://reactjs.org/docs/add-react-to-a-website.html

In the Ant Design documentation in the section Import in Browser is briefly mentioned that it is possible to use the antd js library straight into the browser as a global variable although not recommended https://ant.design/docs/react/introduce , but I am wondering whether there is some working example which illustrates how it's done exactly.在 Ant Design 文档的Import in Browser一节中简要提到可以将antd js 库作为全局变量直接使用到浏览器中，虽然不推荐https://ant.design/docs/react/introduce ，但是我想知道是否有一些工作示例可以说明它是如何完成的。

Here I've created a minimal example with help of the information from the mentioned links above:在这里，我借助上述链接中的信息创建了一个最小示例：


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

By opening the example above in the browser I get the following error:通过在浏览器中打开上面的示例，我收到以下错误：

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

And also now I still have to use the 'antd' components into the example, but I don't know how to reference to them.而且现在我仍然必须在示例中使用“antd”组件，但我不知道如何引用它们。 If I do the following where Button should be a globally assigned antd button component it complains ' ReferenceError: Button is not defined ':如果我执行以下操作，其中Button应该是全局分配的 antd 按钮组件，它会抱怨“ ReferenceError: Button is not defined ”：

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

I would appreciate some suggestions how to make that example running.我会很感激一些如何使该示例运行的建议。

Answer 1

This thread is the first stack overflow question when searching "ant design react without webpack".该线程是搜索“ant design react without webpack”时的第一个堆栈溢出问题。

Here an example with React, ant design and babel (for jsx):这里有一个 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

Here are docs about how to use React and antd in browser without webpack.这里是关于如何在没有 webpack 的情况下在浏览器中使用 React 和 antd 的文档。

https://ant.design/docs/react/introduce#Import-in-Browser https://reactjs.org/docs/add-react-to-a-website.html 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