将别名导入重新连接到相对路径的三种可能的解决方案：
1. babel-插件-模块-解析器
Use babel-plugin-module-resolver https://github.com/tleunen/babel-plugin-module-resolver，同时省略其他 babel 插件/预设。
.babelrc:
"plugins": [
[
"module-resolver",
{
"alias": {
"^@/(.+)": "./src/\\1"
}
}
]
]
构建步骤：babel src --out-dir dist（输出在dist，不会就地修改）
Processed example file:
// input // output
import { helloWorld } from "@/sub/b" // import { helloWorld } from "./sub/b";
import "@/sub/b" // import "./sub/b";
export { helloWorld } from "@/sub/b" // export { helloWorld } from "./sub/b";
export * from "@/sub/b" // export * from "./sub/b";
对于 TS，您还需要@babel/preset-typescript https://babeljs.io/docs/en/babel-preset-typescript并激活.ts扩展通过babel src --out-dir dist --extensions ".ts".
2. Codemod jscodeshift 与正则表达式
所有相关的导入/导出变体来自MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import docs https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export应该支持。该算法的实现如下：
1. 输入：表单中的路径别名映射alias -> resolved path类似于 TypeScripttsconfig.json paths或者 Webpack 的resolve.alias:
const pathMapping = {
"@": "./custom/app/path",
...
};
2. 迭代所有源文件，例如遍历src:
jscodeshift -t scripts/jscodeshift.js src # use -d -p options for dry-run + stdout
# or for TS
jscodeshift --extensions=ts --parser=ts -t scripts/jscodeshift.js src
3. 对于每个源文件，查找所有进出口声明
function transform(file, api) {
const j = api.jscodeshift;
const root = j(file.source);
root.find(j.ImportDeclaration).forEach(replaceNodepathAliases);
root.find(j.ExportAllDeclaration).forEach(replaceNodepathAliases);
root
.find(j.ExportNamedDeclaration, node => node.source !== null)
.forEach(replaceNodepathAliases);
return root.toSource();
...
};
jscodeshift.js:
/**
* Corresponds to tsconfig.json paths or webpack aliases
* E.g. "@/app/store/AppStore" -> "./src/app/store/AppStore"
*/
const pathMapping = {
"@": "./src",
foo: "bar",
};
const replacePathAlias = require("./replace-path-alias");
module.exports = function transform(file, api) {
const j = api.jscodeshift;
const root = j(file.source);
root.find(j.ImportDeclaration).forEach(replaceNodepathAliases);
root.find(j.ExportAllDeclaration).forEach(replaceNodepathAliases);
/**
* Filter out normal module exports, like export function foo(){ ...}
* Include export {a} from "mymodule" etc.
*/
root
.find(j.ExportNamedDeclaration, (node) => node.source !== null)
.forEach(replaceNodepathAliases);
return root.toSource();
function replaceNodepathAliases(impExpDeclNodePath) {
impExpDeclNodePath.value.source.value = replacePathAlias(
file.path,
impExpDeclNodePath.value.source.value,
pathMapping
);
}
};
进一步说明：
import { AppStore } from "@/app/store/appStore-types"
创建以下AST https://astexplorer.net/#/gist/5d148d18ce5ccd86cd6aae8b65167111/76588f532a6c1d8e3c698879790ebffd476e0e6a, whose source.value of ImportDeclaration可以修改节点：
4. 对于每个路径声明，测试包含路径别名之一的正则表达式模式。
5. 获取别名的解析路径并转换为相对于当前文件位置的路径（归功于@Reijo）
replace-path-alias.js(4. + 5.):
const path = require("path");
function replacePathAlias(currentFilePath, importPath, pathMap) {
// if windows env, convert backslashes to "/" first
currentFilePath = path.posix.join(...currentFilePath.split(path.sep));
const regex = createRegex(pathMap);
return importPath.replace(regex, replacer);
function replacer(_, alias, rest) {
const mappedImportPath = pathMap[alias] + rest;
// use path.posix to also create foward slashes on windows environment
let mappedImportPathRelative = path.posix.relative(
path.dirname(currentFilePath),
mappedImportPath
);
// append "./" to make it a relative import path
if (!mappedImportPathRelative.startsWith("../")) {
mappedImportPathRelative = `./${mappedImportPathRelative}`;
}
logReplace(currentFilePath, mappedImportPathRelative);
return mappedImportPathRelative;
}
}
function createRegex(pathMap) {
const mapKeysStr = Object.keys(pathMap).reduce((acc, cur) => `${acc}|${cur}`);
const regexStr = `^(${mapKeysStr})(.*)$`;
return new RegExp(regexStr, "g");
}
const log = true;
function logReplace(currentFilePath, mappedImportPathRelative) {
if (log)
console.log(
"current processed file:",
currentFilePath,
"; Mapped import path relative to current file:",
mappedImportPathRelative
);
}
module.exports = replacePathAlias;
3. 仅正则表达式搜索和替换
迭代所有源并应用正则表达式（未彻底测试）：
^(import.*from\\s+["|'])(${aliasesKeys})(.*)(["|'])$
, where ${aliasesKeys}包含路径别名"@"。新的导入路径可以通过修改第二个和第三个捕获组（路径映射+解析为相对路径）来处理。
该变体无法处理 AST，因此可能被认为不如 jscodeshift 稳定。
目前，正则表达式仅支持导入。副作用导入形式import "module-name"被排除在外，这样做的好处是搜索/替换更安全。
Sample:
const path = require("path");
// here sample file content of one file as hardcoded string for simplicity.
// For your project, read all files (e.g. "fs.readFile" in node.js)
// and foreach file replace content by the return string of replaceImportPathAliases function.
const fileContentSample = `
import { AppStore } from "@/app/store/appStore-types"
import { WidgetService } from "@/app/WidgetService"
import { AppStoreImpl } from "@/app/store/AppStoreImpl"
import { rootReducer } from "@/app/store/root-reducer"
export { appStoreFactory }
`;
// corresponds to tsconfig.json paths or webpack aliases
// e.g. "@/app/store/AppStoreImpl" -> "./custom/app/path/app/store/AppStoreImpl"
const pathMappingSample = {
"@": "./src",
foo: "bar"
};
const currentFilePathSample = "./src/sub/a.js";
function replaceImportPathAliases(currentFilePath, fileContent, pathMap) {
const regex = createRegex(pathMap);
return fileContent.replace(regex, replacer);
function replacer(_, g1, aliasGrp, restPathGrp, g4) {
const mappedImportPath = pathMap[aliasGrp] + restPathGrp;
let mappedImportPathRelative = path.posix.relative(
path.dirname(currentFilePath),
mappedImportPath
);
// append "./" to make it a relative import path
if (!mappedImportPathRelative.startsWith("../")) {
mappedImportPathRelative = `./${mappedImportPathRelative}`;
}
return g1 + mappedImportPathRelative + g4;
}
}
function createRegex(pathMap) {
const mapKeysStr = Object.keys(pathMap).reduce((acc, cur) => `${acc}|${cur}`);
const regexStr = `^(import.*from\\s+["|'])(${mapKeysStr})(.*)(["|'])$`;
return new RegExp(regexStr, "gm");
}
console.log(
replaceImportPathAliases(
currentFilePathSample,
fileContentSample,
pathMappingSample
)
);
