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
,内容如下: