npm 包 gulp-nearley 使用教程

前言:

gulp-nearley 是一个将 .ne 文件编译成解析函数的库,可以轻松地在您的 gulp 构建中使用,提升前端代码的可读性和可维护性。在这篇文章中,我们将介绍如何使用 gulp-nearley。

基础要求

使用 gulp-nearley 需要以下三个包:

在安装这些包之前,请确保您已经安装了 Node.js

安装

这三个包都可以在 npm 上找到。您可以使用以下命令安装:

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

代码创建

在项目根目录中创建一个名为 grammar 的文件夹(可根据自己喜欢的命名),并在其中创建用于编写您的语法文件 .ne

在该文件夹下创建 expression.ne 文件, 并在其中定义相应的语法:

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

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

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

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

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

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

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

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

用法:

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

完整示例代码:

---- -------

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

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

这将遍历您的 ./grammar 目录中的所有 .ne 文件,并将其编译到 ./dist 目录中。

为了使 gulp-nearley 能够识别您的语法,语法文件名必须以 .ne 结尾。如果要改变此默认设置,请提供 options.extension 选项。

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

加载外部终结符

默认情况下,nearley 形式与 GNU Bison 形式相似,因为您必须在您的语法中定义所有使用的符号。这包括终结符和非终结符,但对于终结符,您不必定义表达式。

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

然后您可以使用以下代码在 JavaScript 中生成解析器:

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

然而,这只适用于自定义终结符。 如果您的项目中使用了比如 {{}} 之类的自定义模板标记,则需要使用 options 中的 load 属性来告诉 nearley 如何加载这些标记。它可以是一个函数或一个对象(与 nearley 工具库 require 属性相同)。

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

使用加入 options 的方式将 HANDLEBARS_START 和 HANDLEBARS_END 作为运行时终结符。我们定义了两个字符串模式 {{}} 和两个字符串模板 HANDLEBARS_STARTHANDLEBARS_END,接下来我们就可以在您语法之间轻松地搭建模板系统。例如:

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

其中,HANDLEBARS_START 和 HANDLEBARS_END 已经在前面 options 中被定义,该语法仅解析包含表达式的 Handlebars 部分。需要注意的是,这只允许字符串标记。如果您需要解析更复杂的标记(比如 [==]),则可以使用 RegExp(带有捕获的分组)。

总结

在本篇文章中,我们介绍了如何使用 npm 包 gulp-nearley 进行语法解析。通过使用 gulp-nearley 将语法文件编译成解析函数,可以提高前端代码的可读性和可维护性。此外,我们还介绍了如何加载外部终结符和自定义模板标记。我希望本篇文章对您有帮助!

参考

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60055f9e81e8991b448dcf3d


猜你喜欢

  • npm 包 flows-gateway 使用教程

    1. 简介 flows-gateway 是一个基于 Node.js 的 npm 包,它是一个轻量级的消息队列系统,用于在前端与后端系统之间传递消息。它具有良好的可伸缩能力,可以承载大量消息,使前端与后...

    3 年前
  • npm 包 percentage-difference 使用教程

    前言 在开发前端项目时,经常会遇到需要比较两个值之间的变化程度的情况,例如计算两个时间的时间差、计算两个数字之间的百分比变化等。而 npm 包 percentage-difference 可以帮助我们...

    3 年前
  • npm 包 angular-openfb 使用教程

    什么是 angular-openfb angular-openfb 是一个 AngularJS 模块,提供了使用 Facebook API 的便捷方式。它包含了所有与 Facebook 服务的通信、授...

    3 年前
  • npm 包 ember-mdc 使用教程

    如果你是一名前端开发者,想要快速开发出美观又功能强大的 web 应用,那么你一定不能错过 ember-mdc 这个 npm 包。本文将带你详细了解 ember-mdc 的用法与实现原理,让你轻松掌握使...

    3 年前
  • npm包ga-webdriveragent使用教程

    简介 ga-webdriveragent 是一个使用Node.js写的Web自动化测试客户端,基于Selenium WebDriver和Appium WebDriver协议,使用Facebook的We...

    3 年前
  • npm 包 just-indent 使用教程

    介绍 在前端开发中,我们常常需要处理代码的缩进问题。有时候代码缩进不太规范,一些代码段缩进不一致,就会影响代码的可读性。npm 包 just-indent 就是为了解决这个问题而生的。

    3 年前
  • npm 包 unique_id_generator 使用教程

    在前端开发中,我们经常需要使用唯一的 ID 来标识页面元素,这时候就需要一个好用的 ID 生成器。npm 上有很多 ID 生成器,今天我们来介绍一下 unique_id_generator 这个包的使...

    3 年前
  • npm 包 css-customproperties-parser 使用教程

    简介 在编写前端样式时,我们经常会使用 CSS 自定义属性,也就是 CSS 变量。但是,由于浏览器对 CSS 变量支持的不够完善,导致我们在某些情况下需要将这些自定义属性转化为普通的 CSS 声明。

    3 年前
  • npm 包 findstreak 使用教程

    简介 findstreak 是一个用于计算 Github 用户代码连续贡献天数的 npm 包。它可以通过 Github API 获取用户的代码提交记录,计算出连续贡献天数,并提供了相应的 API。

    3 年前
  • npm包Express-mega-router的使用教程

    简介 Express-mega-router是一个npm包,是一个专门用于构建RESTful API的express路由工具。使用Express-mega-router,前端开发人员可以轻松构建出强大...

    3 年前
  • npm 包 generator-metal-webpack 使用教程

    在 Web 开发领域,前端技术日新月异,我们需要不断地学习新技术,采用新工具来提高自己的开发效率。generator-metal-webpack 就是其中一个非常优秀的 Webpack 脚手架工具,它...

    3 年前
  • npm 包 laravel-elixir-foundation-emails 使用教程

    前端开发中,经常会涉及到邮件设计的问题。如果希望邮件的设计效果更加优秀,并且能够兼容各种邮箱客户端,那么建议使用 Foundation Email。 laravel-elixir-foundation...

    3 年前
  • npm 包 search-issues 使用教程

    简介 search-issues 是一个通过命令行搜索 GitHub 问题的 npm 包。可以帮助前端开发人员快速找到相关问题并解决问题,提高工作效率。 安装 在终端中执行以下命令可以全局安装 sea...

    3 年前
  • npm 包 signalr-service 使用教程

    前言 SignalR 是一个开源的 ASP.NET 应用程序框架,可以在 Web 应用程序中添加实时 web 功能。而 signalr-service 则是一个 npm 包,它可以让前端开发者更加方便...

    3 年前
  • npm 包 computes-dictation-watson 使用教程

    在前端开发中,有时候需要通过语音输入来获取用户输入的文本内容。那么这时候该如何实现呢?本文介绍一款 npm 包,即 computes-dictation-watson,它可以通过 Watson 语音识...

    3 年前
  • npm 包 starfishjs 使用教程

    前言 在前端开发中,我们需要使用很多第三方库来加快开发进程。npm 是一个非常方便的工具,可以帮我们管理这些库。在本文中,我们将介绍一个名为 starfishjs 的 npm 包的使用方法。

    3 年前
  • npm 包 mojs-util-parse-stagger-property 使用教程

    简介 mojs-util-parse-stagger-property 是一款能够帮助前端开发者快速生成复杂动画的 npm 包。通过使用该包,开发者可以轻松生成呈现动画的属性值,例如延迟、过渡时间等。

    3 年前
  • npm 包 rule-builder-client 使用教程

    前言 在前端开发过程中,我们经常需要按照业务需求动态生成一些规则来做数据筛选、验证等操作,而 rule-builder-client 就可以帮助我们完成这个任务。本教程将详细介绍如何使用此 npm 包...

    3 年前
  • npm 包 react-keygen 使用教程

    随着应用程序变得越来越复杂,生成唯一的 ID 变得越来越常见。React 应用程序同样需要生成唯一的 ID 来确保组件间的唯一性。在这种情况下,我们通常会使用 UUID(通用唯一标识符)来创建唯一的标...

    3 年前
  • npm 包 is-directory-promise 使用教程

    在前端开发中,经常需要判断一个路径是否为一个文件夹。Node.js 原生提供了一个 fs 模块,其中有一个方法 fs.stat(),可以用来判断文件或文件夹的存在情况。

    3 年前

相关推荐

    暂无文章