大前端react umi dva antd

yarn workspace中的子包修改时如何实时更新到引用的项

2021-11-23  本文已影响0人  jack钱

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')])
  },
上一篇 下一篇

猜你喜欢

热点阅读