从v2.0开始，"injectBabelPlugin“帮助器已被弃用。您可以使用customize-cra插件进行替换

Question

我正在尝试使用babel自定义我的导入。我正在关注这个链接：

https://medium.com/@leonardobrunolima/react-tips-working-with-relative-path-using-create-react-app-fe55c5f97a21

这是我的config-overrides.js

const { injectBabelPlugin } = require('react-app-rewired');

const rootImportConfig = [
    "root-import",
    {
        rootPathPrefix: "~",
        rootPathSuffix: "src"
    }
];

module.exports = config => injectBabelPlugin(rootImportConfig, config);

Package.json：

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",

目前，这给了我一个错误："injectBabelPlugin“帮助器从v2.0开始就被弃用了。您可以使用customize-cra插件进行替换

因此，我安装了

nom install customize-cra react-app-rewired --dev

并在我的js文件中将'react-app-rewired‘改为'customize-cra’，如下所示：https://github.com/arackaf/customize-cra#available-plugins

然而，这仍然不起作用，因为injectBabelPlugin也在贬值。那么我应该在这里使用什么函数呢？我尝试了这里的配置文件，但我的配置文件也不起作用。它的src功能也是不同的。

https://github.com/timarney/react-app-rewired/issues/348

如何修复我的配置文件和导入？而不是

import { ResultAlert } from '../../components/alerts/ResultAlert';

我想做这样的事情：

import {ResultAlert} from '~/components';

Answer 1

我认为你可以在这里实现你想要的东西，而不必求助于react-scripts。只需在jsconfig.js或tsconfig.ts文件中使用baseUrl配置即可。有关更多细节，请参阅此博客文章：https://dev.to/mr_frontend/absolute-imports-in-create-react-app-3ge8

但本质上是：

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

然后你可以做像import Home from "components/Home"这样的事情，它就会正常工作。