[BUG]replaceAliasPath使用realpathSync带来的别名路径错误问题

[tourze]

#4989 # 问题描述

我们的代码使用lerna来管理，大致结构是：

-- /project1
---- (alias)lib1
---- (alias)lib2
-- /lib1
-- /lib2

project1里面的lib1和lib2是直接ln -s过去的。然后project1定义两个别名 @/lib1 和 @/lib2 来调用这两个lib的代码。lib1和lib2之间也会有调用，也是通过这个别名来引用的。

现在遇到的问题是在 /project1/lib1 中如果使用到 @/lib2 这个别名，最终解析出来的路径是相对于真实路径/lib1来计算，而不是期望的/project1/lib1来计算。

经调试，确认是

这里的问题。

复现步骤

const fs = require("fs");
const path = require("path");

function promoteRelativePath(fPath) {
	const fPathArr = fPath.split(path.sep);
	let dotCount = 0;
	fPathArr.forEach(item => {
		if (item.indexOf('..') >= 0) {
			dotCount++;
		}
	});
	if (dotCount === 1) {
		fPathArr.splice(0, 1, '.');
		return fPathArr.join('/');
	}
	if (dotCount > 1) {
		fPathArr.splice(0, 1);
		return fPathArr.join('/');
	}
	return fPath.replace(/\\/g, '/');
}

function replaceAliasPath(filePath, name, pathAlias = {}) {
	// 后续的 path.join 在遇到符号链接时将会解析为真实路径，如果
	// 这里的 filePath 没有做同样的处理，可能会导致 import 指向
	// 源代码文件，导致文件被意外修改
	console.log('filePath 1', filePath);
	filePath = fs.realpathSync(filePath);
	console.log('filePath 2', filePath);

	const prefixs = Object.keys(pathAlias);
	if (prefixs.includes(name)) {
		return promoteRelativePath(path.relative(filePath, fs.realpathSync(resolveScriptPath(pathAlias[name]))));
	}
	const reg = new RegExp(`^(${prefixs.join('|')})/(.*)`);
	name = name.replace(reg, function (m, $1, $2) {
		console.log('replace', m, $1, $2);

		console.log('path.join(pathAlias[$1], $2)', path.join(pathAlias[$1], $2));
		console.log('path.relative(filePath, path.join(pathAlias[$1], $2))', path.relative(filePath, path.join(pathAlias[$1], $2)));
		
		return promoteRelativePath(path.relative(filePath, path.join(pathAlias[$1], $2)));
	});
	return name;
}

const filePath = '/Users/lzp/work/docker/www/pengpai_diy_fe/packages/karui-weapp/src/taro-ui/common/share-float-block/index.js';
const value = '@/taro-util/showLoading';
const pathAlias = {
	'@/taro-ui': '/Users/lzp/work/docker/www/pengpai_diy_fe/packages/karui-weapp/src/taro-ui',
	'@/taro-util': '/Users/lzp/work/docker/www/pengpai_diy_fe/packages/karui-weapp/src/taro-util',
};

console.log(replaceAliasPath(filePath, value, pathAlias));

输出结果：

filePath 1 /Users/lzp/work/docker/www/pengpai_diy_fe/packages/karui-weapp/src/taro-ui/common/share-float-block/index.js
filePath 2 /Users/lzp/work/docker/www/pengpai_diy_fe/packages/taro-ui/src/common/share-float-block/index.js
replace @/taro-util/showLoading @/taro-util showLoading
path.join(pathAlias[$1], $2) /Users/lzp/work/docker/www/pengpai_diy_fe/packages/karui-weapp/src/taro-util/showLoading
path.relative(filePath, path.join(pathAlias[$1], $2)) ../../../../../karui-weapp/src/taro-util/showLoading
../../../../karui-weapp/src/taro-util/showLoading

期望行为

最后的输入正确应该是 ../../../taro-util/showLoading，而不是../../../../karui-weapp/src/taro-util/showLoading。

系统信息

  Taro CLI 1.3.35 environment info:
    System:
      OS: macOS 10.15.2
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 12.9.1 - /usr/local/bin/node
      Yarn: 1.17.3 - /usr/local/bin/yarn
      npm: 6.10.3 - /usr/local/bin/npm
    npmPackages:
      @tarojs/async-await: ^1.3.35 => 1.3.35 
      @tarojs/cli: ^1.3.35 => 1.3.35 
      @tarojs/components: ^1.3.35 => 1.3.35 
      @tarojs/components-qa: ^1.3.35 => 1.3.35 
      @tarojs/components-rn: ^1.3.35 => 1.3.35 
      @tarojs/plugin-babel: ^1.3.35 => 1.3.35 
      @tarojs/plugin-csso: ^1.3.35 => 1.3.35 
      @tarojs/plugin-sass: ^1.3.35 => 1.3.35 
      @tarojs/plugin-uglifyjs: ^1.3.35 => 1.3.35 
      @tarojs/redux: ^1.3.35 => 1.3.35 
      @tarojs/redux-h5: ^1.3.35 => 1.3.35 
      @tarojs/rn-runner: ^1.3.35 => 1.3.35 
      @tarojs/router: ^1.3.35 => 1.3.35 
      @tarojs/taro: ^1.3.35 => 1.3.35 
      @tarojs/taro-alipay: ^1.3.35 => 1.3.35 
      @tarojs/taro-h5: ^1.3.35 => 1.3.35 
      @tarojs/taro-qq: ^1.3.35 => 1.3.35 
      @tarojs/taro-quickapp: ^1.3.35 => 1.3.35 
      @tarojs/taro-redux-rn: ^1.3.35 => 1.3.35 
      @tarojs/taro-rn: ^1.3.35 => 1.3.35 
      @tarojs/taro-router-rn: ^1.3.35 => 1.3.35 
      @tarojs/taro-swan: ^1.3.35 => 1.3.35 
      @tarojs/taro-tt: ^1.3.35 => 1.3.35 
      @tarojs/taro-weapp: ^1.3.35 => 1.3.35 
      @tarojs/webpack-runner: ^1.3.35 => 1.3.35 
      eslint-config-taro: ^1.3.35 => 1.3.35 
      eslint-plugin-taro: ^1.3.35 => 1.3.35 
      react: ^16.9.0 => 16.12.0 
      react-native: 0.61.4 => 0.61.4 
    npmGlobalPackages:
      typescript: 2.4.2

[taro-bot]

CC @Pines-Cheng

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[tourze]

感觉这里考虑得是否太多了。用到别名的场景，基本肯定都是在src内的。不在src内taro最终也不能正确解析。。我就是发现拆分成npm包很多问题，才改用alias的方式来拆分lib的。本地测试使用：

function replaceAliasPath(filePath, name, pathAlias = {}) {
	Object.keys(pathAlias).forEach(alias => {
		name = name.replace(alias, pathAlias[alias]);
	});
	return path.relative(filePath, name);
}

没啥问题。。

[tourze]

这里的确是很复杂。。。

[luckyadam]

这里的确是很复杂。。。

搞个 demo 来看下咯

[taro-bot]

CC @luckyadam