标题：npm 包 gulp-rollup 使用教程

简介：gulp-rollup 是一个方便的 JavaScript 模块打包工具。本文将介绍 gulp-rollup 的使用教程，包括安装、配置、使用方法和示例代码。

安装

在使用 gulp-rollup 前需要安装 gulp 和 gulp-rollup，可以使用 npm 安装：

npm install --global gulp-cli
npm install --global gulp
npm install --save-dev gulp-rollup

配置

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 等格式。

gulp.task('js', () => {
  return gulp.src('src/**/*.js')
    .pipe(rollup({
      format: 'umd',
      name: 'myLibrary'
    }))
    .pipe(gulp.dest('dist'));
});

以上代码将以 UMD 格式打包，并设置导出的模块名称为 myLibrary。也可以根据需要设置其他格式。

配置监听

可以通过 gulp.watch 方法来监听文件变化并自动重新打包。例如：

gulp.task('watch', () => {
  gulp.watch('src/**/*.js', ['js']);
});

以上代码将监听 src 目录下所有 js 文件的变化，当文件发生变化后将自动执行 js 任务进行打包。

示例代码

最后附上一个完整的示例代码：

-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - -----------------------
----- ----------- - -------------------------------

--------------- -- -- -
  ------ -----------------------
    --------------
      -------- -
        -------------
          -------- ----------------------
          -------- ------
          -------- ------------------
          ---------------- ----
        --
      --
      ------- ------
      ----- -----------
    ---
    -------------------------
---

------------------ -- -- -
  ------------------------- --------
---

-------------------- ------ ----------

以上代码将实现打包 ES6 模块代码为 UMD 格式，并监听文件变化自动重新打包。可以通过 npm run default 命令来执行该任务。

总结

gulp-rollup 是一个简单易用的 JavaScript 打包工具，可以方便地将多个模块打包为一个文件。通过本教程，希望能够帮助读者学习和使用 gulp-rollup，同时也可以为其他类似的工具打下基础。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/57679