Javascript 使用babel插件导入根目录导入不适用于Create React App

我的

.babelrc

配置不工作。我一直收到这个错误消息。

找不到模块：无法解析…中的“@project/customTable”

我想缩短导入路径

有人能帮我修一下吗

当前代码：

从“../../../customTable”导入customTable

目标：
从“@project/customTable”导入customTable

下面是我的
.babelrc
文件：

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

使用网页

我不知道你的代码为什么不起作用。一切似乎都很好。但是，另一种方法是使用网页包别名，如下所示：

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

modeule.exports={
条目：[
require.resolve（“./polyfills”），
require.resolve（'react-dev-utils/webpackHotDevClient'），
path.appIndexJs
],
决心：{
别名：{
“@project”：path.join（_dirname，../src'）/我想您在项目中使用的是react脚本。您必须知道您不能直接更改Babel配置。您可以使用

npm run eject 


但这不是一种推荐的方式，因为弹出会丢失一些功能，比如TypeScript、Sass、CSS模块等等

顺便说一下，您可以使用定制cra和react应用程序重新布线的npm软件包。首先，安装它们：

npm install customize-cra react-app-rewired --dev
//or
yarn add customize-cra react-app-rewired --dev


并在package.json所在的同一级别创建config-overrides.js文件

并将以下配置放入其中：

const { override, addBabelPlugins } = require("customize-cra");

module.exports = override(
  addBabelPlugins([
    "babel-plugin-root-import",
    { rootPathSuffix: "./src", rootPathPrefix: "@/" },
  ])
);


最后但并非最不重要的一点是，您必须更改所有react脚本，以便在package.json文件中重新布线react应用程序，如：


  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },


感谢您提供的解决方案。我的主要目标是尽可能使我的配置正常工作，但我一定会尝试使用此解决方案。@KenRyanLabso当然，让我知道我的解决方案是否适合您。：）