javascript - 使用 babel-plugin-import 导入根目录不适用于 Create-React-App

Question

我的 .babelrc 配置不工作。我不断收到此错误消息。未找到模块:无法在...中解析“@project/customTable”

我想缩短导入路径。

有人可以帮我解决这个问题吗？

当前代码:import customTable from "../../../customTable";

目标:从“@project/customTable”导入自定义表；

下面是我的 .babelrc 文件:

{
  "plugins": [
    ["babel-plugin-root-import", {
      "rootPathSuffix": "src",
      "rootPathPrefix": "@project"
    }]
  ]
}

Answer 1

Use Webpack alias

我不确定为什么您的代码无法正常工作。一切似乎都很好。但是，另一种方法是使用 Webpack 别名来执行此操作，如下所示:

modeule.exports = {
  entry: [
   require.resolve('./polyfills'),
   require.resolve('react-dev-utils/webpackHotDevClient'),
   paths.appIndexJs
  ],
  resolve: {
    alias: {
     '@project': path.join(__dirname, '../src') // <--- Here
    }
  }
}

问: 但是，我使用了create-react-app。我在我的项目目录中找不到 webpack 配置文件？ :(

A: 运行npm run eject，你会在项目目录的config文件夹中获得所有的webpack配置。 :)

注意:在做出所有这些更改以反射(reflect)后，不要忘记重新启动您的应用程序。