ant.design能不能直接编译成浏览器直接引用？

发布网友发布时间：2022-04-19 09:48

共1个回答

热心网友时间：2023-07-04 09:29

肯定是可以的，但是官方不建议这样做，但如果题主真想这么做的话可以按照下面方法：

1. 下载并编译ant-design
git clone https://github.com/ant-design/ant-design.git
cd ant-design
npm i --registry=http://registry.npm.taobao.org
npm run just-deploy

2. 使用方法

编译完成后在dist目录下antd.js和demo.css就是它的js和css文件，但是antd.js依赖react和react-dom，所以要引用node_moles/react/dist/react.js和node_moles/react-dom/dist/react-dom.js。（外加一些es5-shim等）

在ant-design根目录下建立测试文件antd-test.html，内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./dist/demo.css">
<script src="https://as.alipayobjects.com/??component/console-polyfill/0.2.2/index.js,component/es5-shim/4.1.14/es5-shim.min.js,component/es5-shim/4.1.14/es5-sham.min.js,component/html5shiv/3.7.2/html5shiv.min.js,g/component/media-match/2.0.2/media.match.min.js"></script>

<script src="./node_moles/react/dist/react.js"></script>
<script src="./node_moles/react-dom/dist/react-dom.js"></script>
<script src="./dist/antd.js"></script>
</head>
<body>
<div id="components-calendar-demo-basic"></div>
<script>
(function(){
'use strict';
function onPanelChange(value, mode) {
console.log(value, mode);
}
ReactDOM.render(React.createElement(antd.Calendar, {
onPanelChange: onPanelChange
}), document.getElementById('components-calendar-demo-basic'));})();
</script>
</body>
</html>