Antd-mobile is directly introduced into ordinary html files.

followed by the previous question, if the introduction of React+antd, in an ordinary html page has been typed, the code below will work normally.

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <title>Antd</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.2/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.2/umd/react-dom.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.4.3/antd.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/antd/3.4.3/antd.min.js"></script>
</head>

<body>
  <div id="message1">xx</div>
  <script type="text/babel" src="button.js"></script>
</body>

</html>

button.js

ReactDOM.render(
  <div>
    <antd.Button type="primary">Primary</antd.Button>
    <antd.Button>Default</antd.Button>
    <antd.Button type="dashed">Dashed</antd.Button>
    <antd.Button type="danger">Danger</antd.Button>
    <antd.Input placeholder="Basic usage" />
    <antd.Switch defaultChecked />
    <antd.TimePicker defaultOpenValue={moment("00:00:00", "HH:mm:ss")} />
  </div>
, document.getElementById("message1"));

you can see that button.js can be called with antd plus the name of the component. The problem with
is that I want to test antd-mobile, again and fail. I take it for granted and replace it with . If I prompt that there is no antd-mobile, after studying for a long time, I finally find a way, then modify antd-mobile.js to replace the antd-mobile in it with my own name without a hyphen, as follows:

original code

/*!
 * 
 * antd-mobile v2.1.8
 * 
 * Copyright 2015-present, Alipay, Inc.
 * All rights reserved.
 *       
 */
(function webpackUniversalModuleDefinition(root, factory) {
    if(typeof exports === "object" && typeof module === "object")
        module.exports = factory(require("react"), require("react-dom"));
    else if(typeof define === "function" && define.amd)
        define(["react", "react-dom"], factory);
    else if(typeof exports === "object")
        exports["antd-mobile"] = factory(require("react"), require("react-dom"));
    else
        root["antd-mobile"] = factory(root["React"], root["ReactDOM"]);

I changed the following code to replace antd-mobile with m

/*!
 * 
 * antd-mobile v2.1.8
 * 
 * Copyright 2015-present, Alipay, Inc.
 * All rights reserved.
 *       
 */
(function webpackUniversalModuleDefinition(root, factory) {
    if(typeof exports === "object" && typeof module === "object")
        module.exports = factory(require("react"), require("react-dom"));
    else if(typeof define === "function" && define.amd)
        define(["react", "react-dom"], factory);
    else if(typeof exports === "object")
        exports["m"] = factory(require("react"), require("react-dom"));
    else
        root["m"] = factory(root["React"], root["ReactDOM"]);

so you can actually quote it with the < m.InputItem > button < / m.InputItem > .

so my question is how to quote antd-mobile properly without changing it!

complete code is attached (the following code does not work properly when an error is reported)

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <title>Antd</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.2/umd/react.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.2/umd/react-dom.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd-mobile/2.1.8/antd-mobile.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/antd-mobile/2.1.8/antd-mobile.js"></script>
</head>

<body>
  <div id="message1">xx</div>
  <script type="text/babel" src="button-m.js"></script>
</body>

</html>

button-m.js

ReactDOM.render(
  <div>
    <m.Button type="primary">primary</m.Button>
  </div>
  , document.getElementById("message1"));
Mar.06,2021

https://mobile.ant.design/doc.

it's not cost-effective for you to use it like this. Let's use a build tool like webapck

Menu