介绍
在前端开发中，经常需要加载模块。在使用 CommonJS 规范的情况下，使用 require 函数可以很方便地加载模块，而使用 ES6+ 的模块规范，则可以使用 import 语句。然而，在这两个规范中，相对路径是必不可少的一部分。而现在，npm 包 @lcf.vs/mjs-path 就为我们提供了一种更加简便、灵活的方式来解决相对路径问题。
安装
我们可以使用 npm 命令来安装 @lcf.vs/mjs-path：
--- ------- ----------------
使用方法
@lcf.vs/mjs-path 提供了两种方式来使用：
方式一
在项目的入口文件中，引入 @lcf.vs/mjs-path 通过 init 函数进行初始化:
-- -------- ------ - ---- - ---- ------------------- -------
初始化后，我们就可以通过 @lcf.vs/mjs-path 提供的 path 方法来实现相对路径的加载。例如：
-- -------- ------ - ---- - ---- ------------------- ------ - ------ - ---- --------------------------
如上代码所示，我们通过 path('../helpers/helper') 的方式，实现了跳转到 utils.js 的上一级目录，再去引入 helpers/helper.js。
方式二
可以直接使用 @lcf.vs/mjs-path 提供的 default 导出:
-- -------- ------ ---- ---- ------------------- ------ - ------ - ---- --------------------------
在项目中的任意地方，我们都可以直接使用 @lcf.vs/mjs-path 进行相对路径的加载。
需要注意的是，在使用 @lcf.vs/mjs-path 时，相对路径是相对于当前文件所在的目录进行计算的，而不是相对于项目根目录。
示例代码
下面的示例中，我们来演示一下 @lcf.vs/mjs-path 的使用方法：
--- ---------- --- --- - --- ------- - --- ---------- - - --- ------ - - --- --------- - --- ----- - --- ------- - --- ---------- --- ------------
-- -------------------- ------ ---- ---- ------------------- ------ - ---- - ---- --------------- ------ ----- ------- - -- -- - ------ ------------- -- -- ----------------- ------ ----- ---- - ----- -- - ----------------- ------- ---- -------- -- -- ------------------------ ------ ---- ---- ------------------- ------ - ------- - ---- ------------------------- ------ ----- ------ - -- -- - ------------------- ------------ ---------- -- -- --------------------- ------ - ------ - ---- ----------- ------ ----- --- - -- -- - ---------------- ------------ --------- -- -- ----------------- ------ - --- - ---- -------------------- ------
通过 @lcf.vs/mjs-path 提供的功能，我们可以非常方便地实现文件之间的相对路径加载，避免了路径拼接的繁琐和错误。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600671cd30d092702382291e