一、概述

原文地址:https://pro.ant.design/docs/deploy-cn

二、详细

2.1、构建

当项目开发完毕,只需要运行一行命令就可以打包你的应用:

npm run build

由于 Ant Design Pro 底层使用的 roadhog 工具,已经将复杂的流程封装完毕,对于大部分场景,构建打包文件只需要一个命令 roadhog build,构建打包成功之后,会在根目录生成 dist 文件夹,里面就是构建打包好的文件,通常是 ***.js***.cssindex.html 等静态文件。

不过你如果需要自定义构建,比如指定 dist 目录等,则需要通过 .webpackrc 进行配置,详情参看:roadhog 配置

2.1.1、环境变量

当你需要区别开发和部署以及测试环境的时候,可以通过在 .webpackrc 中设置 env 环境变量来实现。

"env": {
// 开发环境
"development": {
"extraBabelPlugins": [
"dva-hmr",
]
},
// build 时的生产环境
"production": {
"extraBabelPlugins": [
"transform-runtime",
"transform-decorators-legacy",
["import", { "libraryName": "antd", "style": true }]
]
}
},

2.1.2、分析构建文件体积

如果你的构建文件很大,你可以通过 analyze 命令构建并分析依赖模块的体积分布,从而优化你的代码。

npm run analyze

然后打开 dist/stats.html 查看体积分布数据。

2.2、发布

对于发布来讲,只需要将最终生成的静态文件,也就是通常情况下 dist 文件夹的静态文件发布到你的 cdn 或者静态服务器即可,需要注意的是其中的 index.html 通常会是你后台服务的入口页面,在确定了 js 和 css 的静态之后可能需要改变页面的引入路径。

2.2.1、代码分割和动态加载

0.3.0 版本之后,我们支持了代码分割和动态加载,只有进入对应路由后才会加载相应的代码,避免首屏加载过多不必要的 JS 文件,提高大规模前端应用研发的扩展性。

├── 0.async.js
├── 1.async.js
├── 10.async.js
├── 11.async.js
├── 12.async.js
├── 13.async.js
├── 14.async.js ...

注意:如果开启了 hash,会变成 0.2df975b2.async.js 的形式,修改代码后 hash 会变化,可以避免前端缓存问题。

这种方式对于部署有一定的要求,你可以将 dist 整体部署到你的后端应用的静态资源目录下(通常为 static 或者 public),这样默认的静态资源引用路径直接指向应用的根目录 //your.application.domain/***.js和 //your.application.domain/***.css

如果你的静态资源域名和应用域名不同(例如独立的 cdn 地址),你需要在 .webpackrc 文件里用 publicPath 对生产环境的静态路径进行配置。可以参考 create-react-app 的部署文档

{
"publicPath": "https://cdn.com/your_app"
}

Ant Design Pro 1.0 版本后我们 .webpackrc 里使用了 "disableDynamicImport": true 默认关掉了动态加载(roadhog@2.x 支持),回退为单文件 index.js 和 index.css 的构建方式。如果需要动态加载删掉这个配置即可。

2.2.2、前端路由与服务端的结合

  Ant Design Pro 中,前端路由使用的是 React Router,所以你可以选择两种路由方式:browserHistory 和 hashHistory

  hashHistory 使用如 https://cdn.com/#/users/123 这样的 URL,取井号后面的字符作为路径。browserHistory 则直接使用 https://cdn.com/users/123 这样的 URL。使用 hashHistory 时浏览器访问到的始终都是根目录下 index.html。使用 browserHistory 则需要服务器做好处理 URL 的准备,处理应用启动最初的 / 这样的请求应该没问题,但当用户来回跳转并在 /users/123 刷新时,服务器就会收到来自 /users/123 的请求,这时你需要配置服务器能处理这个 URL 返回正确的 index.html。如果你能控制服务端,我们推荐使用 browserHistory

express 的例子

app.use(express.static(path.join(__dirname, 'build')));

app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

egg 的例子

// controller
exports.index = function* () {
yield this.render('App.jsx', {
context: {
user: this.session.user,
},
});
}; // router
app.get('home', '/*', 'home.index');

2.2.3、在 Ant Design Pro 中使用前端路由

路由包含的信息在 router.js 中,不过关于 history 的配置是在 index.js 入口文件中,传入配置信息给 dva 构造器即可。

由于使用了 react-router@4,所以引入 browserHistory 与原本 dva 的方式相比有所改变。

import dva from 'dva';
// 引入 browserHistory
import browserHistory from 'history/createBrowserHistory'
import models from './models'; import './index.less'; // use browserHistory
const app = dva({
history: browserHistory(),
}); // default hashHistroy
const app = dva();

关于路由更多可以参看 React Router 。 关于 react-router@4 更多可以参看 All About React Router 4 。

ant design pro (八)构建和发布的更多相关文章

  1. 阿里开源项目之Ant Design Pro

    本篇文章主要包含的内容有三个方面. 第一.Ant Design Pro简介; 第二.Ant Design Pro能做什么; 第三.初步使用; 我相信通过这三个方面的讲解能让你大概知道Ant Desig ...

  2. 使用ant design pro搭建项目

    脚手架搭建 git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project 然后 cd my-proje ...

  3. Ant Design Pro (中后台系统)教程

    一.概念:https://pro.ant.design/docs/getting-started-cn(官方网站) 1.Ant Design Pro 是什么:  https://www.cnblogs ...

  4. ant design pro (十一)advanced Mock 和联调

    一.概述 原文地址:https://pro.ant.design/docs/mock-api-cn Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的 ...

  5. Ant Design Pro快速入门

    在上一篇文章中,我们介绍了如何构建一个Ant Design Pro的环境. 同时讲解了如何启动服务并查看前端页面功能. 在本文中,我们将简单讲解如何在Ant Design Pro框架下实现自己的业务功 ...

  6. ant design pro超详细入门教程

    1.Ant Design Pro 初了解 说到ant design pro,得先了解一下ant design是个什么东西?ant design蚂蚁金服基于react打造的一个服务于企业级产品的UI框架 ...

  7. ant design pro 当中改变ant design 组件的样式和 数据管理

    ant design pro 简介 官网简介 链接 https://pro.ant.design/docs/getting-started-cn 项目结构 https://github.com/ant ...

  8. Ant Design Pro 学习笔记:数据流向

    在讲这个问题之前,有一个问题应当讲一下: Ant Design Pro / umi / dva 是什么关系? 首先是 umi / dva 的关系. umi 是一个基于路由的 react 开发框架. d ...

  9. Ant Design Pro入门教程,安装,运行(V5 Typescript版)

    [前言] 找了很多Admin模板,最后还是看中了AntDesignPro这个阿里巴巴开源的Admin框架,长这样(还行吧,目前挺主流的): 官网地址:https://pro.ant.design/in ...

随机推荐

  1. bzoj 1503: [NOI2004]郁闷的出纳员 -- 权值线段树

    1503: [NOI2004]郁闷的出纳员 Time Limit: 5 Sec  Memory Limit: 64 MB Description OIER公司是一家大型专业化软件公司,有着数以万计的员 ...

  2. 24.最优布线问题(kruskal算法)

    时间限制: 1 s 空间限制: 128000 KB 题目等级 : 白银 Silver 题解 查看运行结果 题目描述 Description 学校需要将n台计算机连接起来,不同的2台计算机之间的连接费用 ...

  3. 2349 Arctic Network(中文版)

    试题描述: 国防部希望通过无线网络连接几个北方前哨基地. 在建立网络时将使用两种不同的通信技术:每个前哨基站都将拥有无线电收发器,另外还有一些前哨卫星通道. 任何带卫星频道的两个前哨都可以通过卫星进行 ...

  4. Mysql -- 设置中国时区时间

       Mysql -- 设置中国时区时间 查看mysql的时区设置 mysql> show variables like '%time_zone%'; 修改mysql的时区设置, 注:mysql ...

  5. 在centos6.0上通过nginx远程执行shell

    nginx本身不支持直接调用shell脚本,我们可以通过安装fastcgi程序,让nginx把调用shell的http请求交给fastcgi程序去处理,然后nginx 再将结果返回给用户方式间接调用s ...

  6. [转] Eclipse的Tomcat插件安装

      Eclipse的Tomcat服务器插件tomcatPlugin是由Sysdeo公司开发的,其下载地址是:http://www.eclipsetotale.com/tomcatPlugin.html ...

  7. Codeforces Beta Round #5 A. Chat Server's Outgoing Traffic 水题

    A. Chat Server's Outgoing Traffic 题目连接: http://www.codeforces.com/contest/5/problem/A Description Po ...

  8. 桥接模式:探索JDBC的接口

    目录概要 场景问题 假设要设计一个电脑商场管理系统的某个模块设计,电脑分为品牌和类型两个纬度,我们应该怎么解决?我们初学者最容易想到的办法就是利用继承的方式,那利用继承实现的类图又是什么样子呢?我们看 ...

  9. WM-G-MR-09模块

    WM-G-MR-09模块,该模块同时支持SDIO与SPI 模式 USI(环隆电气)WM-G-MR-09,该WiFi芯片支持802.11b/g无线网络模式,芯片体积8.2×8.4×1.35(mm),采用 ...

  10. ida sdk add_struc_member array

    tid_t tid = get_struc_id ( "foo_type" ) ; struc_t * sptr = get_struc ( tid ); if ( sptr == ...