随着前端技术的不断发展，我们越来越依赖于各种各样的第三方 npm 包，而这些包中有些命名并不是很直观，甚至有些命名非常长且难记，给我们的开发带来了不便，此时我们就可以使用别名来简化包名。
npm 包 aliased ，就是一个可以让我们使用别名引入 npm 包的工具。
安装 aliased
--- ------- ---------- -------
或者
---- --- ----- -------
使用 aliased
在 package.json 中添加如下配置：
---------- -
-------- ----------------
------------ ----------------
--以上配置中，我们将所有 react 和 react-dom 的引用都替换成了 preact/compat。
然后，在你的代码中，你就可以使用如下代码来引用 react 和 react-dom：
------ ----- ---- ---------------- ------ -------- ---- ----------------
为什么使用 alias？
- 引用更简单，不用记住 npm 包名
当我们使用 alias 后，我们的代码可能会变得更加简洁易懂，因为我们不必再去记忆长长的 npm 包名，同时我们也不必担心在团队合作中出现命名不统一的问题。
- 更容易对应不同的版本
当我们需要使用不同版本的同一 npm 包时，我们可以为每个版本指定一个别名，这样在代码中引入时，我们就可以非常方便地切换版本。
注意事项
- 使用
alias可能会影响你的构建速度
由于 alias 需要遍历整个项目中所有的代码，以检查需要转换的 npm 包名，因此可能会比直接使用 npm 包的方式慢一些。如果你的项目已经很大了，那么最好不要滥用 alias。
- 别名不会影响第三方库内部的依赖
当我们使用 alias 命名引入一个 npm 库时，这个别名并不会在这个 npm 库的内部起作用，这就意味着这个库内部可能还是使用原来的 npm 包名。所以，我们需要注意，在使用 alias 命名引入 npm 库时，我们需要确保该库内部不会使用 npm 包名。
使用案例
webpack.config.js
----- ---- - ----------------
----- --------------------- - ----------------------------------
-------------- - -
------ -------------
------- -
--------- ------------
----- ----------------------- --------
--
-------- -
--- -----------------------
------ -
------ ---------------------------------
------------ ---------------------------------
--
----------- ------- --------
---
--
--.babelrc
-
---------- -
-
--------------------
-
---------- -
----------- ---- ---
-
-
--
---------------------
--
---------- -
----------
-
------------------
-
-------- -
-------- ----------------
------------ ---------------
-
-
-
-
-webpack.config.js 和 .babelrc 搭配使用
在 webpack.config.js 中，我们使用了 aliased-webpack-plugin 插件，将 react 和 react-dom 映射为 preact/compat。
在 .babelrc 中，我们使用了 babel-plugin-module-resolver 插件，也把 react 和 react-dom 映射为 preact/compat。这样做并不是为了重复，而是为了让这个 alias 能够在各种情况下都生效。如果你使用的是 webpack，那么你只需要在 webpack.config.js 中进行配置就可以了。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600559e481e8991b448d7812