在现代的 Web 开发中，单页面应用程序（SPA）变得越来越流行。而 Rollup 可以帮助我们构建高效地 SPA 应用，从而提高 Web 应用程序的性能和用户体验。本文将介绍如何使用 Rollup 构建单页面应用程序。
准备工作
在开始之前，您需要安装 Node.js 和 npm。如果您已经安装了 Node.js，那么可以在终端中运行以下命令来检查 Node.js 和 npm 是否已正确安装：
node -v npm -v
安装完 Node.js 和 npm 之后，我们需要新建一个项目，并在项目中安装 Rollup 和其他相关的依赖项：
mkdir my-spa cd my-spa npm init -y npm install --save-dev rollup rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-babel babel-preset-env
在上面的命令中，我们新建了一个名为 my-spa 的项目，并在其中安装了 Rollup 这个构建工具，以及一些 Rollup 的插件和 babel 的 preset。
创建入口文件
接下来，我们需要在项目中添加一个入口文件。这个入口文件将是我们要构建的 SPA 应用程序的起点。在 my-spa 目录中创建名为 index.js 的文件，并添加以下内容：
import App from './app.js'; const app = new App(); app.render();
在上面的代码中，我们向 index.js 文件中导入了一个名为 App 的类，并在我们的 SPA 应用程序中创建了一个新的 App 对象。然后，在 render 方法中，我们开始渲染我们的 SPA 应用程序。
创建应用程序的组件
我们的 SPA 应用程序可能包含多个组件，如导航栏、页脚、主体内容等。因此，我们需要创建多个组件，并在 App 类的构造函数中组装它们。我们在 my-spa 目录中创建一个名为 components 的目录，并在其中添加一个名为 navbar.js 的文件，用于创建导航栏组件。以下是 navbar.js 文件的内容：
-- -------------------- ---- -------
------ ------- ----- ------ -
------------- -
-------------- - ------------------------------
------------------------ - -
-- -----------------
-- ------------------
-- --------------------
--
-
-------- -
------ ---------------
-
-将每个组件定义为一个类，并在构造函数中创建 DOM 元素。在上面的代码中，我们创建了导航栏的 HTML 内容，并将其添加到 container 属性中。然后，在 render 方法中，我们返回这个订单元素，以便在 App 类中使用。
同样的，我们也可以在 components 目录中创建其他组件文件，如 footer.js 和 main.js 等。这里我们不再细讲。
创建 App 类
我们的 SPA 应用程序由多个组件组成，因此我们需要一个 App 类来管理它们。我们在 my-spa 目录中添加一个名为 app.js 的文件，并添加以下内容：
-- -------------------- ---- -------
------ ------ ---- -------------------------
------ ------ ---- -------------------------
------ ---- ---- -----------------------
------ ------- ----- --- -
------------- -
----------- - --- ---------
----------- - --- ---------
--------- - --- -------
-
-------- -
----- ---- - --------------------------------
---------------------------------------
-------------------------------------
---------------------------------------
-
-在上面的代码中，我们向 app.js 文件中导入了所有的组件类，并在 App 类的构造函数中创建了这些组件的实例。然后，在 render 方法中，我们取得一个名为 root 的 DOM 元素，并将每个组件的 render 方法返回的订单元素添加到 root 元素中。
创建 Rollup 配置文件
现在，我们已经准备好了我们的项目，我们需要创建一个名为 rollup.config.js 的文件，定义 Rollup 的配置项。在 my-spa 目录中创建一个名为 rollup.config.js 的文件，并添加以下内容：
-- -------------------- ---- -------
------ ----- ---- ----------------------
------ ------- ---- -----------------------------
------ -------- ---- -------------------------
------ ------- -
------ -----------
------- -
------- ------
---- ------
--
-------- -
-------
-------- ------------------
-------- -
-
--------------------
-
-------- -
--- ----
-
-
-
-
---
----------
----------
-
--在上面的代码中，我们定义了一个名为 babel、resolve 和 commonJS 的插件，这些插件将帮助 Rollup 转译我们的 ES6 代码并处理各种依赖项。 babel 插件用于将 ES6 代码转译为 ES5 代码，resolve 插件用于使 Rollup 能够正确地找到依赖项，commonJS 插件用于将 CommonJS 模块转换为 ES6 模块。
在 output 属性中，我们指定了输出的格式（ES6 模块格式）和输出目录（dist 目录）。然后，我们在 plugins 属性中添加了所有的插件。
运行 Rollup
现在，我们已经定义了 Rollup 的配置，我们可以通过运行以下命令来构建我们的应用程序：
./node_modules/.bin/rollup -c
在这个命令中，./node_modules/.bin/rollup 表示运行在项目的 node_modules 目录中的 Rollup 命令，并且 -c 表示使用当前目录中的 rollup.config.js 文件。如果这个命令成功运行，我们应该可以在 dist 目录中看到多个文件，如 index.js、navbar.js、main.js 和 footer.js。
引入应用程序
最后一步是将我们的应用程序引入到 HTML 文件中。在 my-spa 目录中创建一个名为 index.html 的文件，并添加以下内容：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- --- -------------------
-------
------
---- ----------------
------- --------------
------ - --- - ---- ------------------
----- --- - --- ------
-------------
---------
-------
-------在上面的 HTML 文件中，我们创建了一个名为 root 的 DIV 元素，并将这个元素用于渲染我们的 SPA 应用程序。然后，我们从 dist 目录中导入了我们构建的应用程序，并在 JS 文件中创建一个新的应用程序对象。最后，我们在页面加载时调用 render 方法，并启动我们的应用程序。
总结
通过 Rollup，我们可以高效地构建 SPA 应用程序。本文介绍了如何使用 Rollup 构建单页面应用程序，并介绍了其中一些基本概念和技术。通过本文的学习，我们可以了解到如何使用 Rollup、Babel 和其他相关技术，以便构建出一个高效和可维护的 SPA 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a35908add4f0e0ffb797b2