npm 包 rollup-plugin-handlebars 使用教程

前言

在前端开发中，我们常常会遇到需要在网页上动态渲染 HTML 的需求。为了方便地完成这一操作，开源社区中涌现出很多优秀的模板引擎，如 Handlebars、EJS、Jade 等。在使用这些引擎的时候，需要把模板和数据传递给引擎，让引擎将其渲染成 HTML，然后再插入 DOM 中。而在打包时，我们需要将这些模板也打包进来，并且希望能够动态引入不同的模板文件。

这时候，rollup-plugin-handlebars 就能够派上用场了。rollup-plugin-handlebars 是一个将 Handlebars 模板编译为 JavaScript 函数，并能够让我们在打包时动态引入模板文件的 Rollup 插件。本文将详细介绍 rollup-plugin-handlebars 的安装和使用方法。

步骤

第一步：安装

在使用 rollup-plugin-handlebars 之前，需要在项目中安装它。执行以下命令即可：

--- ------- ------------------------ ----------

第二步：配置

在完成安装之后，我们需要在 Rollup 配置文件中引入该插件，并进行相应的配置。先是一个简单的 Rollup 配置文件的例子：

------ ---------- ---- ---------------------------

------ ------- -
  ------ --------------
  ------- -
    ----- -----------------
    ------- ------
  --
  -------- -
    ------------
  -
--

在这个配置文件中，我们使用了 rollup-plugin-handlebars 并调用它，然后把它加入到 plugins 数组中。此时使用的是默认配置，即：

-
  --- ---------------- ---------
  ----------- --
-

id 的值指定了 rollup-plugin-handlebars 会去处理哪些文件，handlebars 对象可以传递 Handlebars 的配置。

当然，如果你想对它进行更多的配置，可以传递一个包含参数的对象，来实现自定义行为。下面是一份更为详细的配置文件：

------ ---------- ---- ---------------------------

------ ------- -
  ------ --------------
  ------- -
    ----- -----------------
    ------- ------
  --
  -------- -
    ------------
      ---------------- -
        ----------------- -----
      --
      -------- -----------
      -------- ---------------------
      ----------- -
        ----------------- ------
        -------- ------------------------------
        ----- -----------------
      --
      ---
       - ----------- --- ------ ----------------- ----- --- -------- --
       - -------- ------ --- ---- ---- - ------- -------
       - --- --------------------------------------------------
       - --- --------- --- ------- -- -------- ----- ---- - ------- ------
       - --- --- -------- ---- ------ ---- - ------- ------ --- ---- --
       - -------- -- ---- ------- ------ ----------
       --
      -------------------- -------- -- -
        ----- - ----- ------ - - -------
        -- -------------------------------- -
          ----- -------------- - -------------------
          ----- --------- - ----------------------------------------------- -- -----------
          ----- - ----- ---------- - - ------------------------------ ------------------------------------------------- ------
            ----------------- -- ---------
            ----------- ------ ---- -- ----- - ---------- - --
            --------------- -- -
              ----- --------- - ----------------------------- ----------------------- ----
              ----- ----- - -------------------------
              ----- --- - ------------------- -----------------
              ------------------- -----------------
              ------ -
                ----------
                ------
                ---
              --
            --
            ----------
            ------------- - ---------- ------ --- -- -- ---- -- -
              ----- ---- - -------------------------
              ----- ------ - -------------------------------------- --------------------------------
              ------ ------------ ------ - ------ - --------------- - ------------
            -- --------
          ------------- - -----------
        -
      -
    --
  -
--

该配置文件等价于以下配置：

------------
  --- ----- ----- -------- --
  -------- -----------
  --- -- -------------- --- --
  -------- ---------------------
  ---
   - -- ---------- --------------------
   - ----- ---------- ----------
   --
  ---------------- -
    ----------------- -----
  --
  ---
   - -- ---------- --------- --------- -----------------------------
   - --------------------------------
   --
  ----------- -
    ----------------- ------
    -------- ------------------------------
    --- --------- ----------------- ----- --
    ----- -----------------
  --
  ---
   - --------------
   - -------------------
   --
  -------------------- -------- -- -
    ----- - ----- ------ - - -------
    -- -------------------------------- -
      ----- -------------- - -------------------
      ----- --------- - ----------------------------------------------- -- -----------
      ----- - ----- ---------- - - ------------------------------ ------------------------------------------------- ------
        ----------------- -- ---------
        ----------- ------ ---- -- ----- - ---------- - --
        --------------- -- -
          ----- --------- - ----------------------------- ----------------------- ----
          ----- ----- - -------------------------
          ----- --- - ------------------- -----------------
          ------------------- -----------------
          ------ -
            ----------
            ------
            ---
          --
        --
        ----------
        ------------- - ---------- ------ --- -- -- ---- -- -
          ----- ---- - -------------------------
          ----- ------ - -------------------------------------- --------------------------------
          ------ ------------ ------ - ------ - --------------- - ------------
        -- --------
      ------------- - -----------
    -
  -
--

在这个配置文件中，我们将所有后缀为 .hb 的文件包含进来，并将 Handlebars 的默认配置修改成了比较灵活的配置。

第三步：使用

现在，我们就可以在代码中引入 Handlebars 模板了。以下是一个简单的例子：

------ -------- ---- ----------------

----- ---- - ------ ---------

----- ---- - ---------------

----------------------- - -----

这里我们要注意的是，在不同的模板引擎中，模板和数据的渲染方式可能是不同的。对于 Handlebars 引擎，我们需要把模板和数据传递给 Handlebars 函数，然后 Handlebars 函数会将它们编译成 HTML 字符串。在渲染之前，Handlebars 函数还可以注册一些帮助函数，以方便模板的编写。

总结

在本文中，我们介绍了 rollup-plugin-handlebars 的安装和使用方法，并对其进行了详细的配置。我们还讨论了在使用 Handlebars 引擎中需要注意的一些细节。rollup-plugin-handlebars 在打包时可以方便地引入模板文件，并将其编译成 JavaScript 函数，使得我们在浏览器中可以方便地进行模板渲染。通过学习和使用 rollup-plugin-handlebars，我们可以更加高效地进行前端开发。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/61929

阅读全文

猜你喜欢

  • npm 包 interop-require 使用教程

    什么是 interop-require 在前端开发过程中，我们经常会需要使用其他库来辅助我们实现某些功能，而这些库通常需要使用 CommonJS 或 ES6 模块规范进行引入。

    6 年前
  • npm 包 core-decorators 使用教程

    前言： core-decorators是一个开源的npm包，它为JavaScript类提供了多个实用的ES7装饰器，这些装饰器可以用于改善类的可读性和可维护性，对于学习JavaScript的初学者和中...

    6 年前
  • npm 包 express-jwt-authz 使用教程

    简介 express-jwt-authz 是一款 npm 包，它是构建在 jsonwebtoken 之上的一个 Express.js 中间件，用于验证用户的权限和访问权限。

    6 年前
  • npm 包 gulp-changed-in-place 使用教程

    在前端开发中，我们经常需要对项目中的文件进行打包、压缩等处理操作。其中，gulp 是一个十分常用的前端构建工具，它可以帮助我们自动化进行这些操作。而在使用 gulp 进行文件处理的过程中，有一款非常实...

    6 年前
  • npm 包 lock 使用教程

    在前端开发中，我们常常需要使用一些第三方的包来实现某些功能。而这些包有时候会有版本更新，这就可能导致项目在不同时间运行时使用的是不同版本的包，从而出现一些潜在的问题。

    6 年前
  • npm 包 fast-args 使用教程

    前端开发中，我们常常需要从命令行中获取参数来完成某些操作。而 fast-args 这个 npm 包就是帮助我们在 Node.js 和浏览器上快速解析命令行参数的工具。

    6 年前
  • npm 包 very-fast-args 使用教程

    在前端开发中，经常需要使用命令行工具进行一些操作，而命令行参数的解析是很常见的需求。很多时候，我们需要自己编写代码完成这个任务。不过，有一款 npm 包 very-fast-args，它可以帮助我们非...

    6 年前
  • NPM 包 LRU Memoizer 使用教程

    随着前端技术的不断发展，构建 Web 应用的方式也在不断更新。为了更高效的构建应用，我们需要使用一些工具库或者框架。在前端工程化领域中，NPM 是一个重要的工具。它为我们提供了丰富的开源包，帮助我们完...

    6 年前
  • npm 包 jwks-rsa 使用教程

    在前端开发中，处理认证和授权是一个必须掌握的技能。JSON Web Token (JWT) 是一种广泛使用的认证机制，在使用 JWT 进行认证时，为了安全考虑，需要使用非对称加密算法来生成和验证 to...

    6 年前
  • npm 包 multer-gridfs-storage 使用教程

    在 Node.js 开发过程中，文件上传是常见需求之一。multer-gridfs-storage 是 Node.js 的一个 npm 包，它提供了一种非常方便的方式来上传文件。

    6 年前
  • npm 包 ms-signalr-client 使用教程

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，JavaScript 开发者可以使用 Node.js 来开发后端应用程序。同时，Node.js 的出现也给前端开...

    6 年前
  • npm 包 karma-typescript-preprocessor 使用教程

    前言 在开发前端项目的过程中，我们经常需要使用 TypeScript 来编写代码。而 Karma 是一个流行的 JavaScript 测试运行工具，可以让我们方便地进行前端测试。

    6 年前
  • npm 包 yarn-run-all 使用教程

    在前端开发的过程中，我们经常需要执行多个命令，比如运行多个测试、打包、检查格式等。而 yarn-run-all 这个工具可以帮助我们快速地执行这些命令，提高开发效率。

    6 年前
  • npm 包 primus-client-webpack-plugin 使用教程

    在前端开发中，webpack 是一个广泛使用的构建工具，它将 JavaScript 模块打包成一个或多个文件。而 primus-client-webpack-plugin 是一个 webpack 插件...

    6 年前
  • npm 包 babel-preset-es2015-generators-async 使用教程

    前端开发中，ES6 的出现给我们带来诸多方便和便捷的语法，但是一些高级语法，比如 async/await 在旧版本的浏览器可能无法兼容，这时候我们就需要使用 babel 这样的工具将 ES6 代码转化...

    6 年前
  • npm 包 hash-assets-webpack-plugin 使用教程

    前言 在前端开发中，我们经常需要处理静态资源的缓存问题。通常的解决方案是给文件名添加 hash 后缀，这样可以避免缓存问题。但是手动处理这些文件名的工作量较大且易错。

    6 年前
  • NPM 包 koa-multer 使用教程

    在前端开发中，上传文件是一个常见且必要的需求。koa-multer 是一个轻量级、实用的上传中间件，能够方便地在 koa 框架中实现文件上传功能。本文将介绍 koa-multer 包的用法及示例代码，...

    6 年前
  • npm 包 co-redis 使用教程

    前言 co-redis 是一个基于 Node.js 的 Redis 客户端，旨在通过提供简单的接口并围绕 Node.js 原生的 Redis 客户端进行简化来使 Redis 的使用变得更加容易。

    6 年前
  • npm 包 koa-redis 使用教程

    简介 koa-redis 是一个 Redis 中间件，用于支持使用 Redis 存储 session 数据。Redis 是一个高性能的内存数据存储系统，通常用于缓存和会话存储。

    6 年前
  • npm 包 koa-generic-session 使用教程

    在前端开发中，session 认证是不可避免的一个环节。而 koa.js 作为一个优秀的 Node.js web 框架，它的中间件 koa-generic-session 可以帮助我们实现 sessi...

    6 年前

相关推荐

    暂无文章