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

Question

我的.babelrc配置不起作用。 我不断收到此错误消息。 Module not found: Can't resolve '@project/customTable' in...

我想缩短导入路径。

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

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

目标： import customTable from "@project/customTable";

下面是我的.babelrc文件：

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

Answer 1

使用Webpack别名

我不确定为什么您的代码不起作用。 一切似乎都很好。 但是，另一种方法是使用 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 配置。 :)

注意：在进行所有这些更改以反映后，不要忘记重新启动您的应用程序。

Answer 2

我想你在你的项目中使用 react-script 。 你必须知道你不能直接改变 Babel 配置。 您可以使用

npm run eject 

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

顺便说一句，您可以使用customize-cra 和react-app-rewired 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: "@/" },
  ])
);

最后但并非最不重要的是，您必须将 package.json 文件中的所有 react-script 更改为 react-app-rewired ，例如：

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