Hapi.js 入门：使用 Inert 和 Vision 处理静态文件-JavaScript中文网-JavaScript教程资源分享门户

Hapi.js 是一个基于 Node.js 的开源 Web 框架，它提供了一系列的工具和插件来帮助开发者快速构建高性能的 Web 应用程序。其中，Inert 和 Vision 是两个非常重要的插件，它们可以帮助我们处理静态文件和视图模板，本文将介绍如何使用这两个插件来处理静态文件。

Inert 插件

Inert 插件是 Hapi.js 中处理静态文件的核心插件，它可以让我们将静态文件（如图片、样式表、JavaScript 文件等）直接返回给客户端，而无需编写额外的路由处理器。下面是一个简单的例子：

// javascriptcn.com 代码示例
const Hapi = require('@hapi/hapi');
const Inert = require('@hapi/inert');

const init = async () => {

    const server = Hapi.server({
        port: 3000,
        host: 'localhost'
    });

    await server.register(Inert);

    server.route({
        method: 'GET',
        path: '/static/{param*}',
        handler: {
            directory: {
                path: 'public'
            }
        }
    });

    await server.start();
    console.log(`Server running at: ${server.info.uri}`);
};

init();

在上面的代码中，我们首先通过 require 方法引入了 @hapi/inert 模块，然后在创建 server 实例后，使用 server.register 方法将 Inert 插件注册到服务器中。接着，我们创建了一个路由处理器，它的 path 属性为 /static/{param*}，表示任何以 /static 开头的路径都会被匹配到，handler 属性是一个对象，其中 directory 属性指定了静态文件的目录，这里我们将静态文件放在了 public 目录下。

最后，我们通过 server.start 方法启动了服务器，并在控制台输出了服务器的地址。现在，我们可以在浏览器中访问 http://localhost:3000/static/index.html，就可以看到 public/index.html 文件的内容了。

Vision 插件

除了 Inert 插件，Hapi.js 还提供了 Vision 插件，它可以帮助我们处理视图模板。视图模板是一种动态生成 HTML 内容的技术，它可以让我们将数据和 HTML 结构分离，从而提高代码的可维护性和可读性。

在 Hapi.js 中，我们可以使用 Vision 插件来渲染视图模板，下面是一个简单的例子：

// javascriptcn.com 代码示例
const Hapi = require('@hapi/hapi');
const Vision = require('@hapi/vision');

const init = async () => {

    const server = Hapi.server({
        port: 3000,
        host: 'localhost'
    });

    await server.register(Vision);

    server.views({
        engines: {
            html: require('handlebars')
        },
        relativeTo: __dirname,
        path: 'views'
    });

    server.route({
        method: 'GET',
        path: '/',
        handler: (request, h) => {
            return h.view('index', {
                title: 'Hapi.js 入门',
                message: '欢迎来到 Hapi.js 的世界！'
            });
        }
    });

    await server.start();
    console.log(`Server running at: ${server.info.uri}`);
};

init();

在上面的代码中，我们首先通过 require 方法引入了 @hapi/vision 和 handlebars 模块，然后在创建 server 实例后，使用 server.register 方法将 Vision 插件注册到服务器中。接着，我们使用 server.views 方法设置了视图模板的引擎为 Handlebars，并指定了模板文件所在的目录。这里，我们将模板文件放在了 views 目录下。

最后，我们创建了一个路由处理器，它的 path 属性为 /，表示根路径，handler 属性是一个函数，它使用 h.view 方法渲染了 index 模板，并将数据对象 { title: 'Hapi.js 入门', message: '欢迎来到 Hapi.js 的世界！' } 传递给了模板。现在，我们可以在浏览器中访问 http://localhost:3000/，就可以看到渲染后的模板内容了。

总结

通过本文的介绍，我们了解了如何使用 Inert 和 Vision 插件来处理静态文件和视图模板。在实际开发中，我们可以根据需要选择合适的插件来处理不同的需求。同时，我们也需要注意插件的版本兼容性，避免出现不必要的错误。

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