搜尋

首頁  >  問答  >  主體

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

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

PHP中文网PHP中文网2817 天前473

全部回覆(1)我來回復

  • 阿神

    阿神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.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>

    回覆
    0
  • 取消回覆