在前端开发中，我们常常需要对网站或应用程序进行构建和打包。而每次构建时，我们很可能需要知道当前的构建日期和时间，以方便我们后续的版本管理和发布。
为了解决这个问题，我们可以使用一个名为 metalsmith-build-date 的 npm 包。本文将介绍如何使用这个包，以及它与构建工具 Metalsmith 的配合。
安装 metalsmith-build-date
首先，我们需要在项目中安装 metalsmith-build-date。可以使用下面的命令：
npm i metalsmith-build-date
配置 Metalsmith
在使用 metalsmith-build-date 之前，我们需要先了解一下 Metalsmith。这是一个类似于 Gulp 或 Grunt 的构建工具，但更加简单和灵活。
如果你还不熟悉 Metalsmith，可以先参考官方文档或其他教程进行学习。
在配置 Metalsmith 的过程中，我们需要使用一些插件来处理各种要素（如 Markdown 、HTML、CSS、JS 等）。下面的示例中，我们将使用一个名为 metalsmith-markdown 的插件，它可以将 Markdown 文件转换为 HTML。
-- -------------------- ---- -------
----- ---------- - ----------------------
----- -------- - -------------------------------
----- --------- - ---------------------------------
---------------------
----------------
-----------------------
------------
-----------------
----------------
-------------------- -
-- ----- ----- ----
------------------ ------------
---上面的代码中，我们首先引入了 buildDate 模块，并在 use() 方法中使用它来添加构建日期。
注意：buildDate() 方法需要用作 Metalsmith 中的一个插件（Plugin）。也就是说，它需要装载到 Metalsmith 的插件列表中。
使用 metalsmith-build-date
在完成 Metalsmith 的配置之后，我们现在可以利用 metalsmith-build-date 模块来获取当前的构建日期。只需要在模板文件（如 index.html）中加入如下代码：
<p>Built on <%= buildDate %></p>
注意：buildDate 是模板中的变量名。如果需要使用其他名称，可以在 Metalsmith 的配置选项中进行自定义。
示例代码
以下是一个完整的例子，展示了如何使用 metalsmith-build-date 模块来获取当前的构建日期，以及如何将其插入到 HTML 文件中。
创建一个名为 metalsmith-example 的新项目：
mkdir metalsmith-example cd metalsmith-example npm init -y
安装所需的 npm 包：
npm i metalsmith metalsmith-markdown metalsmith-build-date
创建一个名为 src 的文件夹，并在其中创建一个名为 index.md 的 Markdown 文件：
mkdir src echo "# Hello, world!" > src/index.md
创建一个名为 layouts 的文件夹，并在其中创建一个名为 default.html 的 HTML 模板文件：
mkdir layouts echo "<html><head><title>Metalsmith Example</title></head><body><%- contents %><p>Built on <%= buildDate %></p></body></html>" > layouts/default.html
创建 Metalsmith 的配置文件 index.js：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- -------- - -------------------------------
----- ------- - ------------------------------
----- --------- - ---------------------------------
---------------------
----------------
-----------------------
------------
----------------
-----------------
--------------
------- ---------
---------- -----------
---
-------------------- -
-- ----- ----- ----
------------------ ------------
---最后，运行 node index.js 命令构建项目，查看生成的 HTML 文件：
node index.js cat build/index.html
你可以在生成的 HTML 文件中找到类似下面的输出：
<p>Built on Thu Apr 15 2021 17:35:53 GMT+0800 (中国标准时间)</p>
至此，我们已经成功地使用 metalsmith-build-date 模块来获取了当前的构建日期，并将其插入到 HTML 文件中。这将有助于我们更好地管理和发布我们的应用程序或网站。
总结
在本文中，我们介绍了如何使用 metalsmith-build-date 模块来获取当前的构建日期，并将其插入到 HTML 文件中。同时，我们还学习了如何在 Metalsmith 中使用插件来处理各种要素。
通过以上示例代码和解释，相信你已经掌握了使用 metalsmith-build-date 的方法，希望你能在实际开发中加以应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb609b5cbfe1ea06114c2