如何使用 Rollup 构建单页面应用程序（SPA）-JavaScript中文网-JavaScript教程资源分享门户

在现代的 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 文件的内容：

export default class Navbar {
  constructor() {
    this.container = document.createElement('nav');
    this.container.innerHTML = `
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    `;
  }

  render() {
    return this.container;
  }
}

将每个组件定义为一个类，并在构造函数中创建 DOM 元素。在上面的代码中，我们创建了导航栏的 HTML 内容，并将其添加到 container 属性中。然后，在 render 方法中，我们返回这个订单元素，以便在 App 类中使用。

同样的，我们也可以在 components 目录中创建其他组件文件，如 footer.js 和 main.js 等。这里我们不再细讲。

创建 App 类

我们的 SPA 应用程序由多个组件组成，因此我们需要一个 App 类来管理它们。我们在 my-spa 目录中添加一个名为 app.js 的文件，并添加以下内容：

import Navbar from './components/navbar.js';
import Footer from './components/footer.js';
import Main from './components/main.js';

export default class App {
  constructor() {
    this.navbar = new Navbar();
    this.footer = new Footer();
    this.main = new Main();
  }

  render() {
    const root = document.getElementById('root');
    root.appendChild(this.navbar.render());
    root.appendChild(this.main.render());
    root.appendChild(this.footer.render());
  }
}

在上面的代码中，我们向 app.js 文件中导入了所有的组件类，并在 App 类的构造函数中创建了这些组件的实例。然后，在 render 方法中，我们取得一个名为 root 的 DOM 元素，并将每个组件的 render 方法返回的订单元素添加到 root 元素中。

创建 Rollup 配置文件

现在，我们已经准备好了我们的项目，我们需要创建一个名为 rollup.config.js 的文件，定义 Rollup 的配置项。在 my-spa 目录中创建一个名为 rollup.config.js 的文件，并添加以下内容：

import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonJS from 'rollup-plugin-commonjs';

export default {
  input: 'index.js',
  output: {
    format: 'esm',
    dir: 'dist'
  },
  plugins: [
    babel({
      exclude: 'node_modules/**',
      presets: [
        [
          '@babel/preset-env',
          {
            targets: {
              ie: '11'
            }
          }
        ]
      ]
    }),
    resolve(),
    commonJS()
  ]
};

在上面的代码中，我们定义了一个名为 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 的文件，并添加以下内容：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My SPA Application</title>
  </head>
  <body>
    <div id="root"></div>

    <script type="module">
      import { App } from './dist/index.js';

      const app = new App();
      app.render();
    </script>
  </body>
</html>

在上面的 HTML 文件中，我们创建了一个名为 root 的 DIV 元素，并将这个元素用于渲染我们的 SPA 应用程序。然后，我们从 dist 目录中导入了我们构建的应用程序，并在 JS 文件中创建一个新的应用程序对象。最后，我们在页面加载时调用 render 方法，并启动我们的应用程序。

总结

通过 Rollup，我们可以高效地构建 SPA 应用程序。本文介绍了如何使用 Rollup 构建单页面应用程序，并介绍了其中一些基本概念和技术。通过本文的学习，我们可以了解到如何使用 Rollup、Babel 和其他相关技术，以便构建出一个高效和可维护的 SPA 应用程序。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a35908add4f0e0ffb797b2

如何使用 Rollup 构建单页面应用程序（SPA）