在 Web 前端开发中，我们常常需要生成唯一的 HTML 元素 ID，这样才能正确地绑定事件或者进行样式修改。metalsmith-ids 是一个轻量级的 npm 包，可以帮助我们快速地生成唯一的元素 ID。
安装
首先，我们需要安装 metalsmith-ids，可以使用 npm 或者 yarn 安装：
npm install metalsmith-ids --save-dev
或者
yarn add metalsmith-ids --dev
使用
使用 metalsmith-ids 非常简单，我们只需要在 metalsmith 的配置中加入一行代码即可：
const Metalsmith = require('metalsmith');
const ids = require('metalsmith-ids');
Metalsmith(__dirname)
.use(ids())
.build();上面的代码中，我们使用了 metalsmith-ids 的默认配置。如果需要自定义配置，我们需要在使用时传入一个配置对象，下面是一个示例：
Metalsmith(__dirname)
.use(ids({
pattern: 'id-[a-f0-9]{8}',
usePath: true,
match: '**/*.html',
attribute: 'id'
}))
.build();其中，我们可以通过传入一个正则表达式来自定义 ID 的格式；通过设置 usePath 为 true 来使用文件路径作为 ID 的一部分；通过 match 匹配需要添加 ID 的文件；通过 attribute 指定需要添加 ID 的 HTML 元素属性。
示例
下面是一个完整的示例，我们可以在终端中执行该脚本，之后可以查看生成的 HTML 文件中的元素 ID。
mkdir metalsmith-ids-demo && cd metalsmith-ids-demo npm init -y npm install metalsmith metalsmith-ids --save-dev
在上面的示例中，我们创建了一个新的目录，并且初始化了一个 npm 项目，并且安装了 metalsmith 和 metalsmith-ids。
接着，我们在项目的根目录中创建了一个 index.html 文件，文件内容如下：
-- -------------------- ---- -------
--------- -----
------
------
-----------------------------
-------
------
-----
---------- -----------
------- -- - ---- --- -------------------
------
-------
-------上面的 HTML 中并没有 ID 属性，我们需要使用 metalsmith-ids 来为元素自动添加 ID 属性。
最后，我们创建了一个 metalsmith.js 文件，文件内容如下：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- --- - --------------------------
---------------------
-----------
------------ -- -
-- ----- ----- ----
------------------ ------------
---在上面的代码中，我们使用了 metalsmith-ids 的默认配置，然后在终端中执行以下命令：
node metalsmith.js
完成之后，我们查看生成的 index.html 文件，可以看到其中的元素已经添加了 ID 属性：
-- -------------------- ---- -------
--------- -----
------
------
-----------------------------
-------
------
---- ---------------
--- --------------------- -----------
-- ------------------- -- - ---- --- -------------------
------
-------
-------总结
metalsmith-ids 是一个非常简单实用的 npm 包，可以方便地为 HTML 元素添加唯一的 ID，让我们的代码更加健壮和可维护。通过本文的介绍，相信大家已经掌握了使用 metalsmith-ids 的方法，可以在实际项目中使用了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f3f1d8e776d08040bf5