008-ant design pro 构建和发布

一、概述

原文地址: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 默认关掉了动态加载([email protected] 支持),回退为单文件 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 构造器即可。

由于使用了 [email protected],所以引入 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 。 关于 [email protected] 更多可以参看 All About React Router 4 。

原文地址:https://www.cnblogs.com/bjlhx/p/8975847.html

时间: 2024-10-31 13:20:14

008-ant design pro 构建和发布的相关文章

SpringBoot整合Ant Design Pro进行部署

一.Ant Design Pro 打包 1.1 运行 build打包 $ npm run build 1.2 将打包生成的静态文件拷贝到spring boot 项目中 构建打包成功之后,会在根目录生成 dist 文件夹,然后将dist 文件夹里的的文件复制到 spring boot 项目的 /src/main/resources/static 目录下 二.配置spring boot 项目可访问到static目录下的index.html 2.1 以gradle为例导入spring-boot-sta

ant design pro (十二)advanced UI 测试

一.概述 原文地址:https://pro.ant.design/docs/ui-test-cn UI 测试是项目研发流程中的重要一环,有效的测试用例可以梳理业务需求,保证研发的质量和进度,让工程师可以放心的重构代码和新增功能. Ant Design Pro 封装了一套简洁易用的 React 单元测试和 E2E 测试方案,在项目根目录运行以下命令就能运行测试用例. npm run test:all # 执行所有测试 二.详细 2.1.单元测试 单元测试用于测试 React UI 组件的表现.我们

ant design pro (十四)advanced 使用 CLI 工具

一.概述 原文地址:https://pro.ant.design/docs/cli-cn 为了更好以及高效的开发效率,我们提供了配套的 ant-design-pro-cli 工具. pro cli 提供了如下功能: pro new 新建一个脚手架,会自动将最新的 Ant Design Pro 脚手架下载到本地并安装 pro generate 新建一个模板,包含 model.service.page.component 二.使用过程 2.1.如何使用 使用 npm 安装到本地 npm instal

Ant Design Pro 中的服务端交互

前端请求流程 在 Ant Design Pro 中,一个完整的前端 UI 交互到服务端处理流程是这样的: UI 组件交互操作: 调用 model 的 effect: 调用统一管理的 service 请求函数: 使用封装的 request.js 发送请求: 获取服务端返回: 然后调用 reducer 改变 state: 更新 model 统一的请求处理都放在 services 文件夹中,并且一般按照 model 维度进行拆分文件 services/ user.js api.js ... 其中,ut

Nginx 部署 Ant Design pro

利用Ant Design pro开发的项目,如何用Nginx部署呢? 第一步:把项目打包,打包命令如下: npm run build 运行完毕会在项目目录下生成dist文件夹. 第二步:想要测试打包好的代码是否可以正常运行,安装serve,如下命令 npm i serve -g serve安装完毕,利用serve运行打包好的代码,运行命令: serve dist 测试完毕,代码可以正常运行. 第三步:用Nginx进行部署. 1.下载Nginx:http://nginx.org/en/downlo

Ant Design Pro路由菜单

config /config.js配置list路由指向页面../layouts/NewPage import defaultSettings from './defaultSettings'; // https://umijs.org/config/ import slash from 'slash2'; import webpackPlugin from './plugin.config'; const { pwa, primaryColor } = defaultSettings; // p

如何创建Pull Request,以开源项目ant design pro为例

声明:本文章也是我本人参考网络上的一些教程写的,毕竟我也是第一次为开源项目做贡献,心里难免有点小激动.所以用此文章来记录这个过程,和一些操作方式.同时留作以后可供参考. 背景:最近做了公司一个项目,具体项目我也就不说了,反正用了React+Umi+Ant Design Pro.具体情况是这样,使用官方的SettingDrawer实现了在线切换主题的功能,但是官方的控件中会有如下拷贝设置按钮一直显示. 然而我想要的效果如右图 可是我的项目上线后,不需要复制主题配置进行分享,仅开发过程中设置默认主题

实战 ant design pro 中的坑

1.前戏: 1,替换mock数据: 1.将:.roadhogrc.mock.js 中的代理模式替换 当不使用代理的时候就会将所有 /api/*的链接换成 http://localhost:8080/ export default noProxy ? {'GET /api/*':'http://localhost:8080/'} : delay(proxy, 1000); 2.启动: window:npm run start:no-proxy 其他系统没试 坑 1. what?这是什么鬼没设置ke

使用React+Umi+Ant Design Pro实现生产环境动态切换主题,支持暗黑主题

投入前端开发也有1年的时间了,我还是很菜.在开发中还是很多技巧以及经验不够,写文章也是文笔不行,不过好在写的内容意思大概都能看懂.这次就来介绍一下我在开发过程中遇到的一些问题以及处理技巧. 两月前刚开始试用umi这个React的框架,使用AntD Pro创建好项目后,着实熟悉了几天,不过熟悉这个框架后,就觉得阿里的大佬还是牛.佩服. 事情是这样的,我们能够在AndD Pro的在线预览上看到能够动态切换主题.而实际拉下来的模板中却没有这个功能.我就开始了对比源码. 算了,先上一下项目目录结构吧,不