ant design pro (八)构建和发布
一、概述
原文地址:https://pro.ant.design/docs/deploy-cn
二、详细
2.1、构建
当项目开发完毕,只需要运行一行命令就可以打包你的应用:
npm run build
由于 Ant Design Pro 底层使用的 roadhog 工具,已经将复杂的流程封装完毕,对于大部分场景,构建打包文件只需要一个命令 roadhog build
,构建打包成功之后,会在根目录生成 dist
文件夹,里面就是构建打包好的文件,通常是 ***.js
、***.css
、index.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 (八)构建和发布的更多相关文章
- 阿里开源项目之Ant Design Pro
本篇文章主要包含的内容有三个方面. 第一.Ant Design Pro简介; 第二.Ant Design Pro能做什么; 第三.初步使用; 我相信通过这三个方面的讲解能让你大概知道Ant Desig ...
- 使用ant design pro搭建项目
脚手架搭建 git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project 然后 cd my-proje ...
- Ant Design Pro (中后台系统)教程
一.概念:https://pro.ant.design/docs/getting-started-cn(官方网站) 1.Ant Design Pro 是什么: https://www.cnblogs ...
- ant design pro (十一)advanced Mock 和联调
一.概述 原文地址:https://pro.ant.design/docs/mock-api-cn Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的 ...
- Ant Design Pro快速入门
在上一篇文章中,我们介绍了如何构建一个Ant Design Pro的环境. 同时讲解了如何启动服务并查看前端页面功能. 在本文中,我们将简单讲解如何在Ant Design Pro框架下实现自己的业务功 ...
- ant design pro超详细入门教程
1.Ant Design Pro 初了解 说到ant design pro,得先了解一下ant design是个什么东西?ant design蚂蚁金服基于react打造的一个服务于企业级产品的UI框架 ...
- ant design pro 当中改变ant design 组件的样式和 数据管理
ant design pro 简介 官网简介 链接 https://pro.ant.design/docs/getting-started-cn 项目结构 https://github.com/ant ...
- Ant Design Pro 学习笔记:数据流向
在讲这个问题之前,有一个问题应当讲一下: Ant Design Pro / umi / dva 是什么关系? 首先是 umi / dva 的关系. umi 是一个基于路由的 react 开发框架. d ...
- Ant Design Pro入门教程,安装,运行(V5 Typescript版)
[前言] 找了很多Admin模板,最后还是看中了AntDesignPro这个阿里巴巴开源的Admin框架,长这样(还行吧,目前挺主流的): 官网地址:https://pro.ant.design/in ...
随机推荐
- bzoj 1503: [NOI2004]郁闷的出纳员 -- 权值线段树
1503: [NOI2004]郁闷的出纳员 Time Limit: 5 Sec Memory Limit: 64 MB Description OIER公司是一家大型专业化软件公司,有着数以万计的员 ...
- 24.最优布线问题(kruskal算法)
时间限制: 1 s 空间限制: 128000 KB 题目等级 : 白银 Silver 题解 查看运行结果 题目描述 Description 学校需要将n台计算机连接起来,不同的2台计算机之间的连接费用 ...
- 2349 Arctic Network(中文版)
试题描述: 国防部希望通过无线网络连接几个北方前哨基地. 在建立网络时将使用两种不同的通信技术:每个前哨基站都将拥有无线电收发器,另外还有一些前哨卫星通道. 任何带卫星频道的两个前哨都可以通过卫星进行 ...
- Mysql -- 设置中国时区时间
Mysql -- 设置中国时区时间 查看mysql的时区设置 mysql> show variables like '%time_zone%'; 修改mysql的时区设置, 注:mysql ...
- 在centos6.0上通过nginx远程执行shell
nginx本身不支持直接调用shell脚本,我们可以通过安装fastcgi程序,让nginx把调用shell的http请求交给fastcgi程序去处理,然后nginx 再将结果返回给用户方式间接调用s ...
- [转] Eclipse的Tomcat插件安装
Eclipse的Tomcat服务器插件tomcatPlugin是由Sysdeo公司开发的,其下载地址是:http://www.eclipsetotale.com/tomcatPlugin.html ...
- 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 ...
- 桥接模式:探索JDBC的接口
目录概要 场景问题 假设要设计一个电脑商场管理系统的某个模块设计,电脑分为品牌和类型两个纬度,我们应该怎么解决?我们初学者最容易想到的办法就是利用继承的方式,那利用继承实现的类图又是什么样子呢?我们看 ...
- 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),采用 ...
- ida sdk add_struc_member array
tid_t tid = get_struc_id ( "foo_type" ) ; struc_t * sptr = get_struc ( tid ); if ( sptr == ...