search

Home  >  Q&A  >  body text

javascript - 请问ant.design能不能直接编译成浏览器直接引用便可用？

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

PHP中文网PHP中文网2817 days ago469

reply all(1)I'll reply

  • 阿神

    阿神2017-04-10 16:38:51

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

    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.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等）

    在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>

    reply
    0
  • Cancelreply