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