背景
最近碰到一个需求，需要开发一个html文件，因为项目开发中技术栈基本上使用的是react去做开发，如果能在html中使用react开发效率肯定比原生更好。
引入公共cdn包
首先我们打开react官网，找到cdn链接，按需复制：
image.png
// 适用于开发环境:
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
// 适用于生产环境:
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
这样就引入了react库，但是我们编写jsx等es5+语法必然通过babel转换成es5才行，于是我们得打开babel官网，找打它的cdn链接
image.png
// v6或稳定版
<!-- v6 <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
新建一个html页面，在<head></head>标签内引入以上三个cnd链接包并在<script></script>标签内加入我们熟悉的react语法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/babel">
const TimeNow = () => {
const [time, setTime] = React.useState('');
React.useEffect(() => {
const timer = setInterval(()=>{
var curTime = new Date().toLocaleString();
setTime(curTime);
}, 1000);
return () => {
clearInterval(timer);
}
}, []);
return <div>时间：{time}</div>
}
const MessageBox = () => {
const handleClick = () => {
alert('clicked');
}
return ( <div><h1 onClick={handleClick}>Hello World!</h1><TimeNow /></div> )
};
ReactDOM.render( <MessageBox/>,
document.getElementById('app'),
)
</script>
</html>
我们起本地服务我们验证一下：
1.首先在vscode编辑器安装Live-Server插件，并启动服务
image.png
浏览器展示时间内容说明ok了
image.png
优化一下
通过cdn链接加载对应包有个问题，unpkg是一个内容源自npm的全球快速CDN。
它部署在cloudflare上，在大陆地区访问到的是香港节点。 它支持 h/2 和很多新特性，如果不考虑网络延迟的原因，性能优化较为出色，但是令人遗憾的是往往客户的网络都不太理想，因此我考虑引入本地静态包，但是这里有个问题是babel官网并没有提供任何下载途径，网上的不是收费就是鱼龙混杂，这里有个小技巧：
通过浏览器访问unpkg，直接拷贝源码到本地文件中，做成本地静态包文件：
image.png
优化后：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="./assets/react.js"></script>
<script src="./assets/react-dom.js"></script>
<script src="./assets/babel.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/babel">
const TimeNow = () => {
const [time, setTime] = React.useState('');
React.useEffect(() => {
const timer = setInterval(()=>{
var curTime = new Date().toLocaleString();
setTime(curTime);
}, 1000);
return () => {
clearInterval(timer);
}
}, []);
return <div>时间：{time}</div>
}
const MessageBox = () => {
const handleClick = () => {
alert('clicked');
}
return ( <div><h1 onClick={handleClick}>Hello World!</h1><TimeNow /></div> )
};
ReactDOM.render( <MessageBox/>,
document.getElementById('app'),
)
</script>
</html>
image.png
拓展与思考
同理我在Html文件中使用antd应该没问题吧？我们去antd官网看看有没有提供使用途径，
打开antd首页/文档下看到这样一句话：
image.png
antd给我们提供了多个途径的cdn，引入后使用全局变量即可，下面是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="./assets/react.js"></script>
<script src="./assets/react-dom.js"></script>
<script src="./assets/babel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.18.2/antd.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.18.2/antd.compact.min.css">
</head>
<body>
<div id="app"></div>
</body>
<script type="text/babel">
const TimeNow = () => {
const [time, setTime] = React.useState('');
React.useEffect(() => {
const timer = setInterval(()=>{
var curTime = new Date().toLocaleString();
setTime(curTime);
}, 1000);
return () => {
clearInterval(timer);
}
}, []);
return <div>时间：{time}</div>
}
const MessageBox = () => {
const handleClick = () => {
alert('clicked');
}
const dataSource = [
{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
];
const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
},
];
return (
<div>
<antd.Button onClick={handleClick}>Hello World!</antd.Button><TimeNow />
<antd.Table dataSource={dataSource} columns={columns} />
</div>)
};
ReactDOM.render( <MessageBox/>,
document.getElementById('app'),
)
</script>
</html>
