利用umi实现前端自定义打包

背景：

目前项目有这么一个需求，一套前端代码里面有两个项目，这两个项目一个是设备页面，一个是平台页面，因为这两个项目有共同的页面和代码，所有就写在一个仓库里面。出现的问题是：打包项目A并且也会随带的项目B的代码，这就会造成打包体积的增大，打包速度减慢，并且打包部署后可以在项目A中打开项目B的页面，对产品的安全性造成了威胁。

调研：

之后我去了解umi的打包，发现umi的打包是根据他的路由去打包的，也就是一个路由打包一个页面，路由分为约定式路由和配置路由，约定式路由是umi自动生成的，在umi2中可以在他的配置页面去剔除不需要打包的页面，但是到了umi3就没有不能进行路由筛选了；我选择使用的是umi3中的配置路由

实现：

1.在package.json文件中添加新的打包命令，

"build:nbg": "cross-env SYSTEM=nbg umi build",

"build:tac": "cross-env SYSTEM=tac umi build",

添加SYSTEM环境变量这是最重要的,为了方便调试所以我在start和mock命令后都添加了SYSTEM

 2.在umi中设置的SYSTEM是可以在config.js配置文件拿到的，我们可以根据不同SYSTEM变量去匹配不同的路由，实现自定义打包

const { SYSTEM } = process.env

拿到SYSTEM环境变量后根据不同的变量引入不同的路由文件，然后就可以搞定了

环境变量全局化

以为在package.json中设置的SYSTEM变量只能在config.js中取，如果在组件中使用可以将变量全局化，主要使用的是define插件修改webpack的的配置

 完结