问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
Summer
    2182913

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

    javascriptantd
    阅读 6.5k
    1 个回答
    得票最新
    头像
    徐振震
      2k219
      ✓ 已被采纳

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

      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>
  <div id="components-calendar-demo-basic"></div>
  <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>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题