引言
随着互联网技术的发展，前端的重要性越来越被重视。在前端开发过程中，我们经常需要对页面进行资源的优化处理，其中最常见的是添加 SRI(subresource integrity) 校验，以保证资源的完整性。而要手动编写代码来实现这一功能则会使得我们的开发变得十分繁琐。为了解决这个问题，本文介绍一个 npm 包 makestatic-sri，它可以帮助我们自动生成 SRI 校验码，大大提高了开发效率。
makestatic-sri 功能介绍
makestatic-sri 是一个能够根据给定的文件路径自动计算并生成 SRI 校验码的 npm 包，它的使用十分简单，只需要在指令中指定文件路径即可自动生成 SRI 的校验码，用于页面的引用。
makestatic-sri 使用教程
- 首先需要在本地安装 makestatic-sri ，可以使用 npm 进行安装：
npm install makestatic-sri --save-dev
- 安装完成后，我们需要使用命令行进入到项目的根目录中，并输入以下命令即可根据需要的文件自动生成 SRI 校验码。
makestatic-sri [file_path]
其中 [file_path] 表示需要添加 SRI 校验的文件路径，可以是相对路径或者绝对路径。
生成的 SRI 校验码将会在命令行中输出，我们只需要将其添加到页面的引用标签中即可。
如果我们希望将生成的 SRI 校验码保存到某个文件中，则需要使用以下命令：
makestatic-sri [file_path] --output [output_file_path]
其中 [output_file_path]表示输出文件路径，可以是相对路径或者绝对路径。
makestatic-sri 示例代码
以下代码将使用 makestatic-sri 自动为本地的 jQuery 文件生成 SRI 校验码，并将其添加到页面引用标签中。
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
--------------------- ----------
------- ------------------------------------------------------------------
---------------------------------------
---------------------------------
------- ----------------------------
-------
------
------------------ -------
--------- ------ --------
---- ------------------
-------
-------首先，我们需要使用 npm 安装 makestatic-sri：
npm install makestatic-sri --save-dev
然后，我们进入到项目的根目录中并输入以下命令：
makestatic-sri ./node_modules/jquery/dist/jquery.min.js
生成的 SRI 校验码将会在命令行中输出，我们只需要将其替换到对应的引用标签中即可。
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
--------------------- ----------
------- ------------------------------------------------------------------
-----------------------------------------------------------------------------------
---------------------------------
------- ----------------------------
-------
------
------------------ -------
--------- ------ --------
---- ------------------
-------
-------总结
在前端开发过程中，SRI 校验是很重要的一个环节，而手动编写代码进行校验计算则会让开发变得繁琐。使用 makestatic-sri 可以方便地自动生成 SRI 校验码，从而大大提高了开发效率，本文介绍了 makestatic-sri 的使用方法，并提供了示例代码，希望对您的开发学习有所参考价值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572c881e8991b448e8f08