前言
在开发前端项目时，通常会涉及到大量依赖包的使用。随着项目的复杂度不断增加，依赖包的数量也会越来越多。由此导致的问题是，如果其中某个依赖包需要进行升级或者更换，那么需要进行大量的手动修改和查找。这就需要一种能够实现模块路径别名的解决方案，在这种方案下，可以将冗长的模块路径替换为简单明了的别名，便于代码的维护和管理。而 npm 包 react-app-rewire-module-resolver 就是一个可以帮助我们实现模块路径别名的工具。
react-app-rewire-module-resolver 是什么？
react-app-rewire-module-resolver 是一个 npm 包。它是基于 react-app-rewired 实现的，能够轻松地在 create-react-app 项目中实现模块路径别名。该包是 create-react-app 的一个可扩展配置工具。使用 react-app-rewire-module-resolver 可以方便地实现模块路径别名，不再需要手动操作，大大提高了代码的维护效率。
如何安装 react-app-rewire-module-resolver？
使用 npm 包管理器可以轻松地安装 react-app-rewire-module-resolver，只需执行如下命令即可：
npm install react-app-rewire-module-resolver --save-dev
如何使用 react-app-rewire-module-resolver？
React 应用中，要使用 react-app-rewired 修改 create-react-app 中默认的构建配置。接下来，我们需要将默认的配置文件暴露出来。在项目根目录下，新建 config-overrides.js 文件：
-- -------------------- ---- -------
----- - --------------- - - -------------------------
----- ---- - ----------------
-------------- - -------- ---------------- ---- -
------ - -----------------
--------- ----------------------- -------------
------- ----------------------- -----------
-----------
------ -------
-这段代码的作用是将 utils 和 api 目录添加到别名中。其中，addWebpackAlias 是 customize-cra 库提供的一个函数，它可以让我们轻松地在 config 中添加路径别名映射。
在项目的 package.json 文件中，需要进行如下配置：
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
}其中，start、build 和 test 对应的是 create-react-app 的默认运行脚本。我们需要将这三个命令行替换为 react-app-rewired。
然后，我们需要在项目根目录下新建一个 .env 文件，并添加以下内容：
NODE_PATH=src/
这行代码的作用是将项目的根目录下的 src 目录加入到 node_modules 的搜索路径中。这样，当我们在 import 中使用别名的时候，就可以直接使用 src 作为根目录了。
最后，在项目根目录下，执行如下命令：
npm start
可以看到，模块路径别名已经生效了。
示例代码
如果还不太清楚，下面是一个示例代码，可以更好地理解 react-app-rewire-module-resolver 的用法：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ---- ---- -------------
------ ------------
------ - --- - ---- -------------
------ - ------------- - ---- ------------
----- --- ------- --------- -
------------------ -
-------------
---------- - -
----- -----
--
-
----- ------------------- -
----- ---- - ----- ----------------
--------------- ---- ---
-
-------- -
----- - ---- - - -----------
------ -
---- ----------------
------- -----------------------
---- ---------- -------------------- ---------- --
--- ----------------------------- -- ----------
---------
-- ----------------------
----- - ------- ------------- - -------------
--- --
--- - - - -------- -----
----
------
--
-
-
------ ------- ----其中，我们使用了 src/api 和 src/utils 作为别名。在编写代码时，我们不再需要关心实际的文件路径。这样，就大大提高了代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b4bc6eb7e50355dc00b