使用 script 、link 标签引入 antd

---

antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

大家在使用 antd 时，一般都是通过 npm 包引入。

今天有个同事提出了一个问题：我在项目的公共依赖中引入了antd，导致编译特别慢，怎么能解决一下？

先说下这个项目，是三年前开发的一个基于 jQuery 的内容系统，使用FIS3编译项目。使用npm包的方式引入antd后，编译确实出现假死的情况。

由于 antd 包只是该系统的少数几个页面用，那么能不能直接通过 script 和 link 标签引入呢？

官网有如下介绍：

在浏览器中使用 script 和 link 标签直接引入文件，并使用全局变量 antd。

我们在 npm 发布包内的 antd/dist 目录下提供了 antd.js antd.css 以及 antd.min.js antd.min.css。你也可以通过 [图片上传失败...(image-577c6d-1560424936852)]，[图片上传失败...(image-b7a9b1-1560424936852)] 或 UNPKG 进行下载。

强烈不推荐使用已构建文件，这样无法按需加载，而且难以获得底层依赖模块的 bug 快速修复支持。

注意：3.0 之后引入 antd.js 前你需要自行引入 moment。

在找到moment和antd的CDN链接后，就写了个测试页面：

打开页面一看，浏览器的控制台中，报了以下错误：

Uncaught TypeError: Cannot read property 'createContext' of undefined
    at Object.i.m.a (index.js:15)
    at i (bootstrap:19)
    at Object.i.m.a (renderEmpty.tsx:18)
    at i (bootstrap:19)
    at Module.i.m.a (index.js:8)
    at i (bootstrap:19)
    at Object.i.m.a (index.js:25)
    at i (bootstrap:19)
    at Object.i.m.a (index.tsx:1)
    at i (bootstrap:19)

点进去一看，原来是忘记引用 React 了。

加上后代码如下：

刷新页面：

antd-test.png

完美解决~