在前端开发中，常常需要将一些静态资源如图片、字体等文件复制到打包后的目录下，以便在项目中使用。使用 npm 包 @mariotacke/parcel-plugin-static-files-copy 可以很方便地实现这一目标。
安装
安装该 npm 包非常简单，只需要在项目的根目录下执行下面的命令即可：
npm install --save-dev @mariotacke/parcel-plugin-static-files-copy
然后在项目的 .parcelrc 中添加以下配置：
-- -------------------- ---- -------
-
---------- -------------------------
---------- -
---------------------------------------------- -
---------------- ------
------------ ---------
---------------- ------
-
-
-参数说明：
staticRootDir：静态资源的根目录，默认为项目根目录，可不填。staticDir：要拷贝的静态资源文件夹名称，默认为static，可不填。staticDestDir：拷贝后的静态资源存放的目录，默认为dist，可不填。
使用示例
以一个简单的例子来演示如何使用该 npm 包：
-- -------------------- ---- -------
-- ----------
--------- -----
----- ----------
------
----- ----------------
-----------------------
----- ---------------- ------------------------
-------
------
---- --------------------- -------
------- ------------------------------
-------
-------// src/static/style.css
body {
font-size: 16px;
}// src/static/logo.png
// src/static/main.js
console.log('hello world');以上是一个包含三个静态资源文件的例子。
当使用 Parcel 打包该项目时，@mariotacke/parcel-plugin-static-files-copy 会将 src/static 下的文件拷贝到打包后的 dist 目录下，并将 index.html 中的所有静态资源的相对路径修改为正确的路径，从而使得打包后的项目可以正常访问这些静态资源。
指导意义
使用该 npm 包可以方便地将静态资源拷贝到打包后的目录，避免了手动拷贝这些文件的繁琐过程，提高了开发效率。同时，@mariotacke/parcel-plugin-static-files-copy 的源码也非常简单，可以帮助开发者更好地理解如何编写 Parcel 的插件，提升开发能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672563660cf7123b36365