前言
上一篇文章中我们介绍了 Rollup.js，在本篇文章中我们将介绍如何使用 npm 包 laravel-elixir-rollup-official 结合 Laravel Elixir 进行前端开发。
Laravel Elixir 是一个基于 Gulp 的工作流，它允许您通过简单的 API 实现常见的前端任务，如编译 Sass、打包 JavaScript 等等。
安装
laravel-elixir-rollup-official 是一个兼容 Laravel Elixir 的 npm 包，我们可以通过以下命令进行安装：
--- ------- ------------------------------ ----------
配置
在使用 laravel-elixir-rollup-official 之前，我们需要先配置 Laravel Elixir。在 Laravel 5.* 中，我们需要打开 gulpfile.js ，在 elixir(function(mix) {}) 中添加一些任务：
-------------------- -
--------------------
-------------------
---接着我们需要添加一个 rollup 任务。我们可以使用 rollup() 方法来创建 rollup 任务：
-------------------- -
---------------------
---该命令将查找 resources/assets/js/app.js，使用 Rollup 打包该文件，并将输出文件存储在 public/js/app.js 中。
如果您希望使用其他目录和文件名，只需将参数传递给 rollup() 方法：
-------------------- -
---------------------------------------- --------------------
---接下来，在 gulpfile.js 顶部引入该任务的实现：
--- ------ - --------------------------
------------------------------------------
-------------------- -
-- ---
---我们的 rollup 任务已经配置好了。
选项
rollup 方法支持以下选项：
Entry
使用 entry 选项来指定入口文件：
------------------ -------------------------------
Source Map
使用 sourcemaps 选项来启用源映射：
---------------------------------------- ------------------- ------------ -------
以文件夹为入口进行打包
使用 rollupDir()，实现以文件夹为入口打包。假设有个页面，它需要以下四个模块，并且我们希望将它们打包成 public/js/home.js：
----------------------------------------------- -------------------- -
-------------- -
-------- -
----- -----
----------- ------- -------- --------
------ -
---- -----------------------------------
-
-
-
---这个命令将把文件夹 resources/assets/js/pages/home 视为入口文件夹，找到 index.js（或 index.jsx），把这个文件作为入口文件，打包出 public/js/home.js。
自定义 Rollup 配置
从 laravel-elixir-rollup-official 3.0 开始，支持传递自定义选项，使用方式是将常规 Rollup 配置放入 rollupConfig.js 文件中。
-- ---------------
-------------- - -
------ -----------------------------
------- -
----- -------------------
------- -------
---------- -----
--
--接着，我们可以这样使用 rollup 方法：
----------------------- --------------------
具体使用方式同原版 Rollup，完整的配置列表见 https://rollupjs.org/guide/en#big-list-of-options 。
示例代码
假设我们需要打包 foo.js 和 bar.js 这两个文件，分别位于以下路径：
-------------------------- --------------------------
我们可以在 gulpfile.js 中这样编写代码：
--- ------ - --------------------------
------------------------------------------
-------------------- -
--------------------
------------------
---这将打包 resources/assets/js/foo.js 和 resources/assets/js/bar.js，并将输出文件储存在 public/js 目录下。
结语
本篇文章我们介绍了如何使用 npm 包 laravel-elixir-rollup-official 结合 Laravel Elixir 进行前端开发。此外我们还讲述了该包的配置以及选项。相信大家已经对这个 npm 包的使用有了一定的了解。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedbc11b5cbfe1ea06119ca