84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
请问ant.design能不能直接编译成浏览器直接引用便可用?就像jQuery那样 。具体该如何编译呢?
认证高级PHP讲师
肯定是可以的,但是官方不建议这样做,但如果题主真想这么做的话可以按照下面方法:
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
编译完成后在dist目录下antd.js和demo.css就是它的js和css文件,但是antd.js依赖react和react-dom,所以要引用node_modules/react/dist/react.js和node_modules/react-dom/dist/react-dom.js。(外加一些es5-shim等)
dist
antd.js
demo.css
react
react-dom
node_modules/react/dist/react.js
node_modules/react-dom/dist/react-dom.js
在ant-design根目录下建立测试文件antd-test.html,内容如下:
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_modules/react/dist/react.js"></script> <script src="./node_modules/react-dom/dist/react-dom.js"></script> <script src="./dist/antd.js"></script> </head> <body> <p id="components-calendar-demo-basic"></p> <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>
肯定是可以的,但是官方不建议这样做,但如果题主真想这么做的话可以按照下面方法:
1. 下载并编译ant-design
2. 使用方法
在ant-design根目录下建立测试文件
antd-test.html
,内容如下: