目前我使用的react框架是yarn create umi 生成的umi+typescript的结构。因为懒得配路由,所以沿用umi的约定式路由。现在项目有个新的需求,需要将系统门户和系统管理页面隔离,方便后期作为两套系统分开部署。
正常情况下,我需要将系统管理的代码剪切出来后,移入到一个新的yarn create umi。但是,这样的话会有很多全局通用的代码需要备份,后期如果继续平行开发,也会有一些重复代码要写,而且维护起来不方便。所以,如果能放在同一个项目下,只要根据需要打包的时候只打一部分的话就好了。
之前直接使用webpack配置项目的时候是可以有多入口 entry 来配置的,但是umijs貌似没有这样的配置,而且它的入口文件并不在传统的index.js 或者 main.js。umi提供的global.ts 和 app.ts也并没有起到分离模块的作用。那么是否可以从路由配置来着手呢。
如果是配置式路由,我需要打门户时,只配置门户的路由。需要打管理系统的包时只需要配置管理系统的包。这个过程可以通过打包命令中的参数来进行区分,比如:
/* package.json */
...
"scripts": {
"start": "cross-env ENV=dev PORT=8000 umi dev",
"start:back": "cross-env ENV=dev SYSTEM=back PORT=8001 umi dev",
"start:front": "cross-env ENV=dev SYSTEM=front PORT=8002 umi dev",
"build": "cross-env ENV=prod umi build",
"build:back": "cross-env ENV=prod SYSTEM=back umi build",
"build:front": "cross-env ENV=prod SYSTEM=front umi build",
},
...
但是这样手动配置路由是我所不愿的。那么约定路由该怎么配呢?
其实在.umirc.ts
文件下面有一个属性
/* .umirc.ts */
plugins: [
// ref: https://umijs.org/plugin/umi-plugin-react.html
[
'umi-plugin-react',
{
antd: true,
dva: true,
dynamicImport: { webpackChunkName: true },
title:‘xxxxx',
dll: true,
locale: {
enable: true,
default: 'en-US',
},
routes: {
// 配置非路由的文件夹
exclude:[
/models\//,
/services\//,
/model\.(t|j)sx?$/,
/service\.(t|j)sx?$/,
/components\//,
],
},
},
],
],
routes
属性里面就是配置路由生成规则。只要在 exclude
里配上你不需要的文件夹路径的正则就可以了。
/* .umirc.ts */
import { IConfig } from 'umi-types';
const { ENV, SYSTEM } = process.env;
const exclude = [
/models\//,
/services\//,
/model\.(t|j)sx?$/,
/service\.(t|j)sx?$/,
/components\//,
];
if (SYSTEM === 'back') {
exclude.push(/pages\/front\//);
} else if (SYSTEM === 'front') {
exclude.push(/pages\/back\//);
}
// ref: https://umijs.org/config/
const config: IConfig = {
history: 'hash',
publicPath: './',
treeShaking: true,
define: {
'process.env': ENV,
'process.system': SYSTEM,
},
plugins: [
// ref: https://umijs.org/plugin/umi-plugin-react.html
[
'umi-plugin-react',
{
antd: true,
dva: true,
dynamicImport: { webpackChunkName: true },
title: 'xxxxx,
dll: true,
locale: {
enable: true,
default: 'en-US',
},
routes: {
exclude,
},
},
],
],
extraBabelPlugins: [['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }]],
env: {
development: {
extraBabelPlugins: ['dva-hmr'],
publicPath: '/',
},
production: {
publicPath: './',
},
},
alias: {
moment: path.resolve(path.join(__dirname, 'node_modules', 'moment')),
components: path.resolve(__dirname, 'src/components/'),
'@': path.resolve(__dirname, 'src'),
},
ignoreMomentLocale: true,
theme: './src/theme.js',
disableDynamicImport: true,
hash: true,
proxy: { },
};
export default config;
打包验证:
1、打完整包,门户+管理系统
yarn run v1.16.0
$ cross-env ENV=prod umi build
Build completed in 22.773s
DONE Compiled successfully in 22734ms 18:22:51
File sizes after gzip:
401.26 KB dist\umi.86043977.js
136.99 KB dist\vendors.587501e5.async.js
23.64 KB dist\vendors.7535d2bd.chunk.css
19.28 KB dist\p__front___layout.f4d64491.async.js
8.37 KB dist\umi.ea147321.css
5.88 KB dist\p__back___layout.78bb96a5.async.js
3.92 KB dist\p__front___layout.f32f7225.chunk.css
1.04 KB dist\p__back___layout.43d6f7f9.chunk.css
775 B dist\js\banBackSpace.js
506 B dist\layouts__index.715afec1.async.js
310 B dist\p__404.d5fae864.async.js
111 B dist\layouts__index.874aba3a.chunk.css
103 B dist\p__index.5d4e44d7.async.js
Done in 38.71s.
2、打门户包
yarn run v1.16.0
$ cross-env ENV=prod SYSTEM=front umi build
Build completed in 20.608s
DONE Compiled successfully in 20617ms 18:26:42
File sizes after gzip:
401.15 KB dist\umi.ede31d7c.js
136.99 KB dist\vendors.587501e5.async.js
23.85 KB dist\vendors.d19617ac.chunk.css
19.29 KB dist\p__front___layout.093efb2a.async.js
8.37 KB dist\umi.ea147321.css
3.92 KB dist\p__front___layout.93508df3.chunk.css
775 B dist\js\banBackSpace.js
506 B dist\layouts__index.715afec1.async.js
310 B dist\p__404.d5fae864.async.js
111 B dist\layouts__index.874aba3a.chunk.css
103 B dist\p__index.69575b7c.async.js
Done in 34.86s.
3、打管理系统包
yarn run v1.16.0
$ cross-env ENV=prod SYSTEM=back umi build
Build completed in 19.588s
DONE Compiled successfully in 19598ms 18:23:41
File sizes after gzip:
399.25 KB dist\umi.431a0b0b.js
119.84 KB dist\vendors.c4438a97.async.js
19.61 KB dist\vendors.47fe3595.chunk.css
8.37 KB dist\umi.ea147321.css
5.84 KB dist\p__back___layout.ed9e640c.async.js
1.04 KB dist\p__back___layout.43d6f7f9.chunk.css
775 B dist\js\banBackSpace.js
506 B dist\layouts__index.715afec1.async.js
310 B dist\p__404.d5fae864.async.js
111 B dist\layouts__index.874aba3a.chunk.css
103 B dist\p__index.69575b7c.async.js
Done in 34.16s.
文件上还是能看的很清楚的,打门户包 没有back的文件,打管理系统包没有front文件。