在Babel+Express JS中如何避免相对路径导入？

当然有！在Babel里你可以通过babel-plugin-module-resolver这个插件来实现和TypeScript paths类似的路径别名配置，帮你摆脱../../这类繁琐的相对路径，具体操作步骤如下：

• 安装依赖插件
  首先通过包管理工具安装这个开发依赖：

  npm install --save-dev babel-plugin-module-resolver
  # 或者使用yarn
  yarn add --dev babel-plugin-module-resolver
  

• 配置Babel别名
  打开你的Babel配置文件（常见的有.babelrc、.babelrc.js或babel.config.js），在plugins数组中添加插件的配置项，映射你需要的别名路径。比如你想把app/xxx指向项目根目录下的app/xxx文件夹（如果你的app目录在src下，就把路径改成./src/app）：

  示例（.babelrc 格式）：

  {
    "plugins": [
      [
        "module-resolver",
        {
          "alias": {
            "app": "./app"
          }
        }
      ]
    ]
  }
  

  示例（babel.config.js 格式）：

  module.exports = {
    plugins: [
      ['module-resolver', {
        alias: {
          'app': './app'
        }
      }]
    ]
  };
  

• 验证配置效果
  完成配置后，你就可以直接用别名导入文件了：

  // 替代之前的 import router from '../../app/routes'
  import router from 'app/routes'
  

额外提示 #

如果你的项目同时使用TypeScript，记得保持Babel的别名配置和tsconfig.json中的paths字段一致，这样TypeScript的类型检查和编辑器提示都能正常工作，避免出现报错。比如TS的paths配置可以这样写：

{
  "compilerOptions": {
    "paths": {
      "app/*": ["./app/*"]
    }
  }
}

内容的提问来源于stack exchange，提问作者shamon shamsudeen