yarn workspace中的子包修改时如何实时更新到引用的项
2021-11-23 本文已影响0人
jack钱
yarn workspace中的子包修改代码时如何实时更新到引用的项目中,动态更新?而不是每次都需要build再查看效果?
需要用到webpack中的 alias 配置项(用于配置别名)
通过umi的api进行配置
![](https://img.haomeiwen.com/i27354208/f13baacf60f0116b.png)
![](https://img.haomeiwen.com/i27354208/b234a975ed388f01.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')])
},