【已更新】简化项目中的 require/import 路径，避免陷入 ../../../ 的地狱循环。

你是不是很讨厌代码里到处都是 ../../../？跟我来，我会告诉你为什么应该使用它babel-plugin-module-resolver来提高工作效率，编写更简洁的代码。

更新 1（2019 年 3 月 31 日）：

正如 Pavel Lokhmakov 建议的那样，我在这里创建了一个新的 GitHub 仓库，用于实现本文所述的功能，而无需修改eject应用程序。
react-app-rewired这customize-cra两个库都允许你create-react-app在不使用 `eject` 命令的情况下调整 webpack/babel 配置。
只需将这些包作为开发依赖项安装，然后在项目根目录下创建一个名为 `.webpack.conf` 的新文件config-overrides.js，并将你的自定义配置放在那里即可。之后，你只需根据react-app-rewired文档更新你的 npm 脚本即可。

灵感

我一直都不喜欢这样写代码：

import NavBar from '../../components/NavBar';

对我来说，这看起来非常混乱，不够简洁，也难以维护。想象一下，以后你需要修改项目的目录结构，就必须逐个文件进行修改，更新代码以反映更改。这简直太难维护了！
但我很喜欢从目录中导入包的方式node_modules：

// ES6 import syntax
import React, { Fragment } from 'react';

// CommonJS require syntax
const nodemailer = require('nodemailer');

所以我很想找到一种方法，像这样导入/引入我的自定义模块/组件。babel-plugin-module-resolver幸好有这个工具！

太长不看

您可以找到与本文相关的 GitHub 代码库：
https://github.com/mjraadi/babel-plugin-module-resolver-test-app
https://github.com/mjraadi/babel-plugin-module-resolver-customize-cra

它有什么作用？

我将让插件作者来解释：

这个插件可以简化项目中的 require/import 路径。例如，与其使用复杂的相对路径（例如 `/etc/require/import/`），不如../../../../utils/my-utils直接写成 `/etc/require/import/` utils/my-utils。这样可以提高工作效率，因为你无需计算访问文件前需要向上移动多少层目录。

如果你还不知道 Babelbabel是什么，它是一个 JavaScript 编译器，主要用于将 ECMAScript 2015 及更高版本的代码转换为与当前及旧版浏览器或环境兼容的 JavaScript 版本。如果你正在使用create-react-app类似库构建应用程序，它们实际上都在底层使用了 Babel。

让我们开始吧

create-react-app接下来我将向您展示如何在通过以下命令创建的应用程序中使用此插件：

$ create-react-app babel-plugin-module-resolver-test-app

create-react-app它封装了项目设置和所有配置，并提供创建可用于生产环境的应用程序的工具。由于我们需要更改 Babel 配置，因此需要对我们的应用程序进行操作。执行 eject 操作会将Babel 的配置文件和开发/构建/测试脚本eject移动到您的应用程序目录中。create-react-app

注意：这是一个单向操作。一旦执行eject，就无法撤销！
这对于我们的用例来说没问题，因为我们正在构建一个测试应用。请运行以下命令：

$ npm run eject

确认并继续。

注意：撰写本文时，存在一个错误，create-react-app详情请参见此处。解决方法是删除该node_modules目录并重新安装依赖项。

安装依赖项：

$ npm install

babel-plugin-module-resolver在项目目录中执行以下命令来安装插件：

$ npm install --save-dev babel-plugin-module-resolver

打开package.json文件并查找 babel 配置。这是 eject 后的样子：

...
"babel": {
  "presets": [
      "react-app"
    ]
  },
...

现在我们需要告诉 Babel 使用我们的模块解析器，并定义根目录和别名。编辑 Babel 配置部分，使其看起来像这样：

...
"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      ["module-resolver", {
        "root": ["./src"],
        "alias": {
          "dir1": "./src/Dir1",
          "dir2": "./src/Dir2"
        }
      }]
    ]
  },
...

现在在名为 `<directory> ` 和 ` src<directory>` 的目录中创建两个目录。我们定义的别名将分别指向这两个目录。Dir1Dir2

ComponentA.js在目录中创建一个名为 `component` 的文件Dir1，并将以下代码放入其中：

import React from 'react';
import ComponentB from 'dir2/ComponentB';

const ComponentA = () => (
  <p>
    Hello from <ComponentB />
  </p>
);

export default ComponentA;

现在ComponentB.js在Dir2目录中创建以下代码：

import React from 'react';

const ComponentB = () => (
  <a 
    href="https://www.bitsnbytes.ir"
    className="App-link"
    target="_blank"
    rel="noopener noreferrer"
  >
    Bits n Bytes Dev Team
  </a>
);

export default ComponentB;

现在编辑该目录App.js中的文件src：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import ComponentA from 'dir1/ComponentA';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <ComponentA />
        </header>
      </div>
    );
  }
}

export default App;

请注意，我无需向上或向下跳转到其他目录即可导入组件。现在我们可以运行应用程序了，请在终端中运行以下命令：

$ npm start

您应该可以在浏览器中正常看到您的应用。如有任何疑问或问题，请随时留言。

结论

自定义模块解析器可以节省您的时间，并避免处理到处都是 ../ 的烦恼。它们需要一些时间来设置，并确保与现有工具完全兼容，但最终的效果以及再也不用看到 ../../../../../.. 的视觉满足感，对于大型项目来说，绝对值得最初的投入。

关于我

我是一名全栈 Web 开发人员，也是Bits n Bytes Dev Team的联合创始人。Bits n Bytes Dev Team是一个由才华横溢的专业自由职业开发人员组成的小团队，我们提供基于尖端技术的定制 Web 应用程序开发服务，以满足客户独特的业务需求。

我目前可以接受工作邀请，您可以访问我的作品集网站https://www.bitsnbytes.ir/portfolio查看，或者通过raadi@bitsnbytes.ir联系我。