javascript - 请问ant.design能不能直接编译成浏览器直接引用便可用?
PHP中文网
PHP中文网 2017-04-10 16:36:51
0
1
476

请问ant.design能不能直接编译成浏览器直接引用便可用?就像jQuery那样 。具体该如何编译呢?

PHP中文网
PHP中文网

认证高级PHP讲师

全部回覆(1)
阿神

肯定是可以的,但是官方不建议这样做,但如果题主真想这么做的话可以按照下面方法:

1. 下载并编译ant-design

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

2. 使用方法

编译完成后在dist目录下antd.jsdemo.css就是它的js和css文件,但是antd.js依赖reactreact-dom,所以要引用node_modules/react/dist/react.jsnode_modules/react-dom/dist/react-dom.js。(外加一些es5-shim等)

在ant-design根目录下建立测试文件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>
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板