npm 包 laravel-elixir-rollup-official 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

上一篇文章中我们介绍了 Rollup.js，在本篇文章中我们将介绍如何使用 npm 包 laravel-elixir-rollup-official 结合 Laravel Elixir 进行前端开发。

Laravel Elixir 是一个基于 Gulp 的工作流，它允许您通过简单的 API 实现常见的前端任务，如编译 Sass、打包 JavaScript 等等。

安装

laravel-elixir-rollup-official 是一个兼容 Laravel Elixir 的 npm 包，我们可以通过以下命令进行安装：

npm install laravel-elixir-rollup-official --save-dev

配置

在使用 laravel-elixir-rollup-official 之前，我们需要先配置 Laravel Elixir。在 Laravel 5.* 中，我们需要打开 gulpfile.js ，在 elixir(function(mix) {}) 中添加一些任务：

elixir(function(mix) {
    mix.sass('app.scss')
       .webpack('app.js');
});

接着我们需要添加一个 rollup 任务。我们可以使用 rollup() 方法来创建 rollup 任务：

elixir(function(mix) {
    mix.rollup('app.js');
});

该命令将查找 resources/assets/js/app.js，使用 Rollup 打包该文件，并将输出文件存储在 public/js/app.js 中。

如果您希望使用其他目录和文件名，只需将参数传递给 rollup() 方法：

elixir(function(mix) {
    mix.rollup('resources/assets/js/foo.js', 'public/js/bar.js');
});

接下来，在 gulpfile.js 顶部引入该任务的实现：

var elixir = require('laravel-elixir');
require('laravel-elixir-rollup-official');

elixir(function(mix) {
    // ...
});

我们的 rollup 任务已经配置好了。

选项

rollup 方法支持以下选项：

Entry

使用 entry 选项来指定入口文件：

mix.rollup({entry: 'resources/assets/js/app.js'});

Source Map

使用 sourcemaps 选项来启用源映射：

mix.rollup('resources/assets/js/app.js', 'public/js/app.js', {sourcemaps: true});

以文件夹为入口进行打包

使用 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 方法：

mix.rollup({configFile: 'rollupConfig.js'});

具体使用方式同原版 Rollup，完整的配置列表见 https://rollupjs.org/guide/en#big-list-of-options 。

示例代码

假设我们需要打包 foo.js 和 bar.js 这两个文件，分别位于以下路径：

resources/assets/js/foo.js
resources/assets/js/bar.js

我们可以在 gulpfile.js 中这样编写代码：

var elixir = require('laravel-elixir');
require('laravel-elixir-rollup-official');

elixir(function(mix) {
    mix.rollup('foo.js')
       .rollup('bar.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