yarn workspace中的子包修改代码时如何实时更新到引用的项目中,动态更新?而不是每次都需要build再查看效果?
需要用到webpack中的 alias 配置项(用于配置别名)
通过umi的api进行配置
image.png
image.png
const getWorkspaceAlias = () => {
const basePath = path.resolve(__dirname, '../') // 指向项目根目录的相对路径, 子包中需要修改成 子包配置文件对于总项目根目录 的相对路径
const pkg = fs.readJSONSync(path.resolve(basePath, 'package.json')) || {}
const results: any = {}
const workspaces = pkg.workspaces
if (Array.isArray(workspaces)) {
workspaces.forEach((pattern) => {
const { found } = new GlobSync(pattern, { cwd: basePath })
found.forEach((name) => {
const pkg = fs.readJSONSync(
path.resolve(basePath, name, './package.json')
)
results[pkg.name] = path.resolve(basePath, name, './src')
})
})
}
return results
}
chainWebpack: (config: any, { webpack }) => {
const alias = getWorkspaceAlias();
// const includeArr = [];
for (const key in alias) {
// 设置 alias
config.resolve.alias.set(key, alias[key]);
// path.join([path1][, path2][, ...]) 用于连接路径
// path.relative(from, to) 用于将绝对路径转为相对路径,返回从 from 到 to 的相对路径(基于当前工作目录)。
// includeArr.push(join(__dirname, relative(__dirname, alias[key])))
}
// config.module.rules.get('ts-in-node_modules').include.add(includeArr); // 这边不需要了
// config.module.rules.get('ts-in-node_modules').include.add([join(__dirname, '../drbt-core'),join(__dirname, '../drbt-formily-components'),join(__dirname, 'src')])
},
config.module.rules.get('ts-in-node_modules')...的部分参考下一篇文章
升级umi4后不需要这个配置了,如果你是umi3,并且配置动态编译后运行报错的话,就试一下下方的配置
workspaces中的子包进行动态编译配置(别名配置)后编译报错? - 简书 (jianshu.com)
需要安装2个包
"fs-extra": "^11.1.1",
"glob": "^7.1.4",
引入
import path, { join, relative } from 'path';
// @ts-ignore
import fs from 'fs-extra';
import { GlobSync } from 'glob';