使用 script 、link 标签引入 antd

作者: 雷布斯基 | 来源:发表于2019-06-13 19:22 被阅读0次

使用 script 、link 标签引入 antd
Day04笔记
CSS样式
js知识点总结（1）
html学习之路（一）- 头部标签
Vue3初使用
react 路由 2
常用API
在vue中使用tcplayer
CSS部分

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链接后，就写了个测试页面：

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"></script>
    <script type="text/javascript" src="https://unpkg.com/antd@3.19.3/dist/antd.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.19.0/antd.css">
</head>
<body>
</body>
</html>

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

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 了。

加上后代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"></script>
    <script src="https://unpkg.com/antd@3.19.3/dist/antd.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.19.0/antd.css">
</head>
<body>
<div id="demo-app"></div>

<script type="text/babel">
ReactDOM.render(
    <div>
      <p>demo</p>
      <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.Button type="link">Link</antd.Button>
    </div>,
    document.getElementById("demo-app")
);
</script>
</body>
</html>

刷新页面：