UMI升级之后多了很多新特性，其中之一就是UMI-UI。但是我的ant design pro 项目却没有这个UI功能，也就是右下角没有那个小图标。
版本问题
首先我以为是我的UMI 版本不对，官方说明需要在UMI2.9.0之上才可以使用这一个功能。但是我吧版本升级到最高的时候，发现还是不行
环境变量
在pro 项目启动的时候，执行npm sceipts指令，会读取config文件，也会读取所有的环境变量。可以直接打印process.env查看所有的环境变量。在这个环境变量里面是UMI-UI：none。但是我从官方down 先来一个新项目。是没有这个变量。我就觉得是在某一个地方，启动的时候，给我的项目添加了一个UMI-UI=none 的环境变量。
npm scripts 脚本指令执行逻辑
npm 执行脚本只要是shell指令都可以执行的指令。例如我的项目npm run start 执行的是umi dev。就会执行在node_modules里面bin文件夹下面的umi 指令。就会指向到umi依赖里面bin文件夹下的umi.js ,接着就会指向到到lib文件夹下的cli.js 。再指向到scripts文件夹里面的dev文件。
# umi.js
#!/usr/bin/env node
const resolveCwd = require('resolve-cwd');
const localCLI = resolveCwd.silent('umi/bin/umi');
if (localCLI && localCLI !== __filename) {
const debug = require('debug')('umi');
debug('Using local install of umi');
require(localCLI);
} else {
require('../lib/cli');
}
# cli.js
switch (script) {
case 'build':
case 'dev':
case 'test':
case 'inspect':
require(`./scripts/${script}`);
break;
default:
{
const Service = require('umi-build-dev/lib/Service').default;
new Service((0, _buildDevOpts.default)(args)).run(aliasMap[script] || script, args);
break;
}
}
在dev.js中定义变量enableUmiUI。当enableUmiUI为false的时候，就会添加环境变量process.env.UMI_UI = 'none';
const enableUmiUI = process.env.UMI_UI === '1' || process.env.UMI_UI !== 'none' && (0, _isUmiUIEnable.default)(cwd);
if (process.env.UMI_UI_SERVER !== 'none' && enableUmiUI) {
process.env.UMI_UI_BROWSER = 'none';
umiui = new (_UmiUI().default)();
const _ref2 = yield umiui.start(),
port = _ref2.port;
process.env.UMI_UI_PORT = port;
}
if (!enableUmiUI) {
process.env.UMI_UI = 'none';
}
上面代码还涉及到了_isUmiUIEnable变量引入的是isUmiUIEnable.js
我的最后返回为undefine 。而正确返回应该为true。
满足以下情况就会返回为true
if (getDep(pkg, '@ant-design/pro-layout')) return true; // antdpro@3 拥有依赖pro-layout
if (getDep(pkg, 'ant-design-pro')) return true; // antdpro@2 拥有依赖ant-design-pro
if (getDep(pkg, 'antd-pro-merge-less') || hasFiles(cwd, ['config/router.config.js', 'src/layouts/BasicLayout.js'])) {
return true;
} // project with tech-ui in alipay 拥有依赖antd-pro-merge-less或者当前目录下面有config/router.config.js和src/layouts/BasicLayout.js
if (process.env.BIGFISH_COMPAT) {
if (getDep(pkg, '@alipay/tech-ui') && config.appType === 'console') return true;
}
满足以上任意条件，就会启动umi-ui
