npm 包 proto-js-loader 使用教程

阅读时长 6 分钟读完

简介

proto-js-loader 是一个 npm 包,它的作用是在 Webpack 打包时将 .proto 文件编译成 JavaScript。

它是在 protobuf.js 基础上开发的,能够将 protobuf.js 不支持的语法转换成 protobuf.js 支持的语法。

安装

在项目中安装 proto-js-loader:

配置

在 Webpack 配置文件中添加以下代码:

使用

在代码中引入 .proto 文件的编译后的 JavaScript 文件:

person.proto.js 文件是通过 proto-js-loader 编译生成的。现在我们可以使用 protobuf.js 对 personProto 进行操作了。

示例

下面是一个简单的示例:

person.proto 文件:

person.proto.js 文件:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    ------ -------
-----
展开代码

你可以使用以下代码测试本示例:

如果一切正常,你将会看到以下输出:

总结

使用 proto-js-loader,我们可以在前端项目中使用 .proto 文件,并且能够利用 protobuf.js 的强大功能。使用本教程中的示例代码,可以更好地理解 proto-js-loader 的使用方法。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/72444

纠错
反馈

纠错反馈