前言
当我们在开发前端项目时，经常需要引入一些第三方库以及自己编写的一些通用代码。但是，这些文件的路径可能会随着项目的改变而改变，这时候就需要用到 wrapper-path 这个 npm 包。wrapper-path 可以让你用一种更自然的方式引入文件，而不用担心文件路径的变化。
安装
在命令行中输入以下代码：
--- ------- ------------
使用
使用 wrapper-path 的基本语法如下：
--------------------------------- ----------
其中，filepath 是你想要引入的文件路径，options 是一些可选参数。
options
basePath
指定一个基础路径，如果 filepath 是相对路径，则在 basePath 上解析 filepath。
示例代码：
------------------------------- - --------- ------- ---
resolve
resolve 参数是一个函数，用于解析 filepath，它接收 3 个参数：filepath，被解析的模块的文件名；basedir，被解析的模块的目录名；extensions，模块可能的扩展名。这个函数必须返回一个解析后的文件路径。
示例代码：
------------------------------- -
-------- -------- ---------- -------- ----------- -
-- ----------
------ -------- - ---------
-
---使用示例
在项目根目录下建立一个 utils 目录，并在其中创建一个 util.js 文件，内容如下：
-------------- - -
---- -------- -- -
-------------------
-
-在 index.js 中，我们普通的 require 的方式引入该文件：
----- ---- - --------------------------- ----------- -- ---
这时候，我们改变了 index.js 的目录结构，将它移到了 src 目录下：
--- --- ---- - --- -------- --- ------ - --- ------- ---
如果还想引用 utils/util.js，那么我们需要改变 require 路径：
----- ---- - ---------------------------- ----------- -- ---
这时候，我们可以使用 wrapper-path，来实现相对路径的引用：
----- ----------- - ------------------------ -- -- ------- ----- ---- - ----------------------------- ----------- -- ---
我们还可以在 options 中指定 basePath：
----- ----------- - ------------------------ -- -- -------- ----- ---- - ---------------------------- - --------- ------- --- ----------- -- ---
这样，即使我们改变了 index.js 的目录结构，也能正常地引用 utils/util.js。
总结
使用 wrapper-path 这个 npm 包，我们可以用一种更自然的方式引入文件，而不用担心文件路径的变化。无论你是开发小项目还是大项目，wrapper-path 都能为你解决文件路径的问题，让你的代码更加简洁易懂。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600671188dd3466f61ffe735