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 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配置。：）

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

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"
  },

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

2 个答案: