84669인 학습
152542인 학습
20005인 학습
5487인 학습
7821인 학습
359900인 학습
3350인 학습
180660인 학습
48569인 학습
18603인 학습
40936인 학습
1549인 학습
1183인 학습
32909인 학습
请问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
,内容如下: