标题：npm 包 gulp-rollup 使用教程
简介：gulp-rollup 是一个方便的 JavaScript 模块打包工具。本文将介绍 gulp-rollup 的使用教程，包括安装、配置、使用方法和示例代码。
安装
在使用 gulp-rollup 前需要安装 gulp 和 gulp-rollup，可以使用 npm 安装：
--- ------- -------- -------- --- ------- -------- ---- --- ------- ---------- -----------
配置
gulp-rollup 可以通过定义 gulp 任务来使用，下面是一个简单的配置示例：
----- ---- - ----------------
----- ------ - -----------------------
--------------- -- -- -
------ -----------------------
--------------
-- ------ --
---
-------------------------
---在上面代码中，定义了一个名为 js 的 gulp 任务，使用 gulp.src 方法来选择需要打包的源文件，通过 gulp-rollup 插件的 rollup 方法进行打包，并将打包结果输出到 dist 目录。
使用方法
gulp-rollup 作为一个 rollup 的插件，在使用时需要传入 rollup 的配置参数。下面是一些常用的配置和用法：
配置 rollup 插件
可以通过 rollup 插件来进行代码转换和优化。例如，在打包 ES6 代码时，需要使用 rollup-plugin-babel 插件进行转码：
----- ----- - -----------------------
----- ----------- - -------------------------------
--------------- -- -- -
------ -----------------------
--------------
-------- -
-------------
-------- ----------------------
-------- ------
-------- ------------------
---------------- ----
--
-
---
-------------------------
---配置输出格式
通过 format 参数配置打包输出格式，包括 CommonJS、ES module、UMD 等格式。
--------------- -- -- -
------ -----------------------
--------------
------- ------
----- -----------
---
-------------------------
---以上代码将以 UMD 格式打包，并设置导出的模块名称为 myLibrary。也可以根据需要设置其他格式。
配置监听
可以通过 gulp.watch 方法来监听文件变化并自动重新打包。例如：
------------------ -- -- - ------------------------- -------- ---
以上代码将监听 src 目录下所有 js 文件的变化，当文件发生变化后将自动执行 js 任务进行打包。
示例代码
最后附上一个完整的示例代码：
----- ---- - ----------------
----- ------ - -----------------------
----- ----------- - -------------------------------
--------------- -- -- -
------ -----------------------
--------------
-------- -
-------------
-------- ----------------------
-------- ------
-------- ------------------
---------------- ----
--
--
------- ------
----- -----------
---
-------------------------
---
------------------ -- -- -
------------------------- --------
---
-------------------- ------ ----------以上代码将实现打包 ES6 模块代码为 UMD 格式，并监听文件变化自动重新打包。可以通过 npm run default 命令来执行该任务。
总结
gulp-rollup 是一个简单易用的 JavaScript 打包工具，可以方便地将多个模块打包为一个文件。通过本教程，希望能够帮助读者学习和使用 gulp-rollup，同时也可以为其他类似的工具打下基础。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/57679