在前端开发中，我们会经常使用一些第三方的 npm 包来进行开发。但是有时候我们需要在代码中引入一些不是 npm 包的依赖，比如某些第三方库、图片资源等等，这时候我们就需要手动将这些资源复制到我们的项目中，显得很麻烦和冗余。而 babel-plugin-copy-npm 就是一个可以解决这个问题的 npm 包。
什么是 babel-plugin-copy-npm
babel-plugin-copy-npm 是一个 babel 插件，它能够帮助我们将项目所依赖的第三方库、图片资源等从 node_modules 目录下复制到我们的项目目录中，从而让我们的代码能够顺利地运行。
如何安装和配置
首先我们需要在项目中安装 babel-plugin-copy-npm。可以使用 npm 命令进行安装：
npm install babel-plugin-copy-npm --save-dev
安装完成后，我们需要在 babel 的配置文件中添加 babel-plugin-copy-npm 这个插件。比如我们的 .babelrc 文件：
-- -------------------- ---- -------
-
---------- -
------------ -
---------- ---------
------------ ------
------------------ ------
---------- -----
------- --
--
-
-其中，distDir 表示将依赖复制到哪个目录下；forceCopy 表示是否强制复制，即依赖是否每次都要复制；checkDependency 表示是否检查依赖文件是否已被复制到了项目目录中；verbose 表示是否显示复制的详细信息；only 表示只复制指定的依赖，如果为空表示复制所有依赖。
如何使用
安装和配置完成后，我们还需要在代码中引入插件。可以在 webpack 的配置文件中加入以下内容：
-- -------------------- ---- -------
----- ------------ - -
-------- ---
--
-- --------------------- --- ------------- -
--------------------------------------
-
-------------- - -
------- -
------ -
-
----- --------
---- -
------- ---------------
-------- -------------
--
-------- ---------------
--
--
--
--当 NODE_ENV 为 production 时，即生产环境时，我们就会在代码中引入 babel-plugin-copy-npm 这个插件，这样在打包项目时就会将依赖复制到指定的目录下。
注意事项
- babel-plugin-copy-npm 只会复制我们在代码中实际使用的依赖项。
- 如果我们使用了一些不是通过 npm 安装的依赖，比如某些第三方库，在使用时需要在配置文件中，手动添加进去。
- babel-plugin-copy-npm 需要配合 babel 使用，需要将其加入到 babel 的插件列表中。
示例代码
下面是一个示例代码，演示如何在 webpack 中配合 babel-plugin-copy-npm 进行打包。假设我们项目中依赖了 jQuery，我们需要将其复制到 dist 目录下。我们的目录结构如下：
./src
├── index.js
├── index.html
└── images
└── logo.png其中，index.js 中引用了 jQuery：
import $ from 'jquery';
$('body').append('<h1>Hello, world!</h1>');我们的 webpack 配置文件如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------------ - -
-------- ----------------------
-------- ---
--
-- --------------------- --- ------------- -
--------------------------------------
-
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
------- -
------ -
-
----- --------
---- -
------- ---------------
-------- -------------
--
-------- ---------------
--
-
----- -------------------
----- -----------------
---------- -
--------- ----------------------
--
--
-
----- ----------
------- --------------
--
--
--
--当我们执行打包命令时，即可自动将 node_modules 目录下的 jQuery 复制到 dist 目录下。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672eb0520b171f02e1e95