前言：在做前端项目的时候，经常需要处理一些文件的拷贝和目录的结构调整等，如果手动去做这些事情，一来很费时间，二来也容易出错。本篇文章介绍一个 npm 包 parcel-plugin-static-files-copy 来解决这个问题。
parcel-plugin-static-files-copy 是什么？
parcel-plugin-static-files-copy 是一个可以拷贝静态资源到指定目录的插件，使用 parcel 打包工具时，可以轻松实现将指定的静态资源文件夹拷贝到打包后的目录中。
如何使用？
- 首先安装 parcel-plugin-static-files-copy
npm install parcel-plugin-static-files-copy -D
- 在项目中新建并配置 .parcelrc 文件
-- -------------------- ---- -------
-
---------- -------------------------
---------- -
-------------------- -
--------- -
------------
--
--------- ----------------
-
-
-其中，assets 指定要拷贝的静态资源路径，output 指定拷贝后的目标路径。
- 运行 parcel 打包工具
parcel build index.html
完成以上三步，即可将静态资源拷贝到目标路径中了。
示例代码
下面是一个简单的例子，在项目中新建 index.html 和 src/assets 目录，包含一张图片和一个样式文件：
-- -------------------- ---- -------
---- ---------- ---
--------- -----
----- ----------
------
----- ----------------
-------------------------------------- ------------
----- ---------------- -------------------------
-------
------
----------------------------------- ---------
---- ----------------------- -------
-------
-------/* style.css */
body {
background-color: #f2f2f2;
}执行 parcel 打包命令之前，目录结构如下：
├── index.html
└── src
└── assets
├── image.jpg
└── style.css执行 parcel 打包命令之后，目录结构如下：
-- -------------------- ---- -------
--- ----
- --- ----------
- --- -------------
- --- ---------
- --- ---------
--- ----------
--- ---
--- ------
--- ---------
--- ---------在 dist 目录下，可以看到静态资源已经被拷贝到了 static-assets 目录下。
总结
parcel-plugin-static-files-copy 是一个非常实用的 npm 包，可以方便地帮助我们拷贝静态资源到目标路径中。通过本文的介绍，相信大家已经能够轻松使用了，希望能对大家的项目开发带来一点帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/parcel-plugin-static-files-copy