html文件中使用react、antd等

背景

最近碰到一个需求，需要开发一个html文件，因为项目开发中技术栈基本上使用的是react去做开发，如果能在html中使用react开发效率肯定比原生更好。

引入公共cdn包

首先我们打开react官网，找到cdn链接，按需复制：

image.png

// 适用于开发环境:

// 适用于生产环境:

这样就引入了react库，但是我们编写jsx等es5+语法必然通过babel转换成es5才行，于是我们得打开babel官网，找打它的cdn链接

image.png

// v6或稳定版

新建一个html页面，在标签内引入以上三个cnd链接包并在标签内加入我们熟悉的react语法：

我们起本地服务我们验证一下：
1.首先在vscode编辑器安装Live-Server插件，并启动服务

image.png

浏览器展示时间内容说明ok了

image.png

优化一下

通过cdn链接加载对应包有个问题，unpkg是一个内容源自npm的全球快速CDN。
它部署在cloudflare上，在大陆地区访问到的是香港节点。 它支持 h/2 和很多新特性，如果不考虑网络延迟的原因，性能优化较为出色，但是令人遗憾的是往往客户的网络都不太理想，因此我考虑引入本地静态包，但是这里有个问题是babel官网并没有提供任何下载途径，网上的不是收费就是鱼龙混杂，这里有个小技巧：
通过浏览器访问unpkg，直接拷贝源码到本地文件中，做成本地静态包文件：

image.png

优化后：

image.png

拓展与思考

同理我在Html文件中使用antd应该没问题吧？我们去antd官网看看有没有提供使用途径，
打开antd首页/文档下看到这样一句话：

image.png

antd给我们提供了多个途径的cdn，引入后使用全局变量即可，下面是我的代码：