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