如何使用绝对路径解决导入问题？答案

【问题标题】：How do I resolve import with absolute path?如何使用绝对路径解决导入问题？
【发布时间】：2018-12-12 13:04:57
【问题描述】：

我需要在 brunch-config.js 中设置什么才能解析项目根文件夹的绝对路径？即

import { helper } from '/imports/utilities/helper'

原因是我有一个旧版 React 应用程序，它使用相对路径导入本地文件。当我尝试使用 brunch 时，我需要找到一种设置 brunch 的方法，以便它能够理解路径而无需更改代码。

我尝试使用 npm 别名，但不确定它是如何工作的

npm: {
  aliases: {
    '/imports': 'imports/**'
  }
}

【问题讨论】：

这似乎是一个不错的问题，但您可能想添加一些有关您为什么要尝试完成此操作或您尝试过的事情的详细信息。这里的人往往对简短的问题持谨慎态度。
@Haem 已更新。感谢您的建议。

标签： npm brunch

【解决方案1】：

使用babel-plugin-module-resolver 包找到解决方案。

由于我所有的代码都在/imports 目录下，所以在brunch-config.js 中，我根据他们的documentation 设置了一个别名：

plugins: {
  babel: {
    plugins: [
      ...,
      ["module-resolver", {
        "root": ["./imports"],
        "alias": {
          "/imports": ([, path]) => `./imports${path}`,
        }
      }]
    ],
    presets: [
      ...
    ],
  }
},

这样，如果我执行import Screen from '/imports/components/screens'，它将解析./imports/components/screens下的文件

您也可以在 .babelrc 中设置别名，但您可能想改用正则表达式。

【讨论】：