什么是rollup-plugin-npm
rollup-plugin-npm是一个Rollup插件，用于处理NPM包中的导入语句。它可以将从npm中导入的模块打包到一个js文件中，同时可以避免导入的库被打包到多个js文件中，减少打包的大小和减少网络请求等问题。
使用rollup-plugin-npm可以使您的代码更加简洁，易于维护和部署。本文将介绍如何使用rollup-plugin-npm及其配置和示例代码。
安装
首先，您需要在项目中安装rollup和rollup-plugin-npm：
npm install rollup rollup-plugin-npm --save-dev
示例
假设您正在开发一个应用程序，需要使用lodash库。为了使用lodash，您可能会编写如下的代码：
import _ from 'lodash';
console.log(_.isEmpty({})); // true如果不使用rollup-plugin-npm，则lodash将被打包到多个文件中。然而，使用rollup-plugin-npm，您只需要指定打包中需要使用的模块，而不是整个lodash库。
示例1 - 基础使用
修改rollup配置文件以使用rollup-plugin-npm：
-- -------------------- ---- -------
-- ----------------
------ --- ---- --------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -----
--
-------- -
-----
-
--使用命令行构建项目：
rollup -c
这将创建一个包含您的应用程序和所需依赖项（如lodash）的单个文件，可以直接在浏览器中使用。
示例2 - 指定导入
如果您只需要lodash中的特定函数，可以使用rollup-plugin-npm提供的"jsnext:main"选项。例如，在这个示例中，我们只需要使用isEmpty函数：
-- -------------------- ---- -------
-- ----------------
------ --- ---- --------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -----
--
-------- -
-----
------- ----- -- -------------------------------
----- ------ -- ----------------
--------------- -----
-- ----------------------------------------------------------------------------
------------ ----- -- --------------
-------- -------------------------------------
-- ----------------------------------------------------------
--
-
--使用命令行构建项目：
rollup -c
这将创建一个只包含lodash中的isEmpty函数的文件，可以直接在浏览器中使用。
示例3 - 不使用ES模块
如果使用的模块不是ES模块，则需要添加一个额外的插件rollup-plugin-commonjs，以便rollup能够正确处理模块。在这个示例中，我们使用Underscore.js库，它不支持ES模块：
-- -------------------- ---- -------
-- ----------------
------ -------- ---- -------------------------
------ --- ---- --------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -----
--
-------- -
-----
------- -----
----- ----
---
----------
-
--使用命令行构建项目：
rollup -c
这将创建一个包含Underscore.js和所有依赖项的文件，可以直接在浏览器中使用。
总结
通过使用rollup-plugin-npm，您可以轻松地将依赖项打包到单个文件中，使您的代码更快，更小，更易于维护和部署。
同时，您可以在rollup-plugin-npm选项中指定导入细节，仅导出您需要的函数而不是整个模块。
另外，如果使用的模块不支持ES模块，则需要添加常见的rollup-plugin-commonjs插件。
更多详细信息，请查阅rollup-plugin-npm 官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/163860