vscode插件开发-打包umijs框架react项目

问题：需要把一个Umijs框架开发的react项目打包，然后运行到vscode插件项目里，但是vscode插件运行需要把项目打包成一个css、一个js,如果有多个css、js,vscode插件运行就会报错

但是umijs默认打包就会打成多个css、js.所以首先解决打包问题

1、安装插件

npm install babel-plugin-dynamic-import-node --save-dev

2、在.umirc.ts文件注入，不需要引入,这个插件可以帮助导出后只有一个css、js

import {defineConfig} from 'umi';

export default defineConfig({
...
extraBabelPlugins: ['babel-plugin-dynamic-import-node']
})

3、但是加了这个运行dev,页面就会报错，而且vscode插件运行的数据请求不能使用nginx代理，要用绝对路径请求，所以我们需要依赖注入加判断

4、确保安装了cross-env

在package.json,重新添加一条打包命令

{
...
"scripts": {
 ...
"build:vscode": "cross-env VSCODE_ENV=vscode umi build"
}
}

5、在.umirc把process.env要用的变量注入,这样打包就不会出错误了

import {defineConfig} from 'umi';
// 命令执行时生成的环境变量
const {MODE_ENV,MOCK, VSCODE_ENV} = process.env
export default defineConfig({
...