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

Question

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

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

原因是我有一个旧版React应用程序，它使用相对路径导入了本地文件。在尝试使用早午餐时，我需要找出一种设置早午餐的方法，以便它无需更改代码即可了解路径。

我尝试使用npm别名，但不确定其工作原理

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

Answer 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中设置别名，但是您可能想使用正则表达式。