【React】antd-mobile 直接引入到普通的 html 文件中
接着之前发的问题，如果在普通html网页中引入React+antd，已经搞字了，代码如下可正常运行。
<!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="https://segmentfault.com/q/1010000014591841/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'));
可以看到button.js中用antd加上组件的名字就可以调用了。
现的问题是我又想再测试下antd-mobile，结果失败了，我想当然的换成了<antd-mobile.Button>，如果提示不存在antd-mobile，研究了半天终于找到一个办法，就修改antd-mobile.js将里面的antd-mobile换成了自己的一个不带横线的名字，如下：
原代码
/*!*
* 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"]);
我改成了以下代码，将antd-mobile换成了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"]);
于是这样竟然可以用<m.InputItem>按钮</m.InputItem>这样引用了。
那么我的问题是如何不改变antd-mobile就可以正常引用！
附完整代码（下面的代码是报错无法正常运行的）
<!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="https://segmentfault.com/q/1010000014591841/button-m.js"></script>
</body>
</html>
button-m.js
ReactDOM.render(<div>
<m.Button type="primary">primary</m.Button>
</div>
, document.getElementById('message1'));
回答
https://mobile.ant.design/doc...
你这么用不划算的。还是用webapck这类构建工具吧
以上是 【React】antd-mobile 直接引入到普通的 html 文件中 的全部内容， 来源链接： utcz.com/a/75311.html
