在前端开发中，我们使用各种工具来创建静态网站。Metalsmith是一个流式文件处理器，可以自定义的基础静态站点生成器，使您可以在转换您的源代码时使用所有先进的构建工具和所需的文本处理程序。
在本教程中，我们将了解一个非常有用的Metalsmith插件，即metalsmith-give。当我们需要向metalsmith集成给定组件时，将它们添加到内部Metalsmith操作中可能很麻烦。metalsmith-give是一个Metalsmith插件，它允许您“给”一组组件并将它们集成到Metalsmith环境中。
安装和配置
在使用metalsmith-give之前，我们需要将其安装到我们的项目中。您可以在命令行中使用以下命令执行此操作：
npm install --save-dev metalsmith-give
完成安装后，我们需要将其配置到我们的Metalsmith环境中。 在我们的代码中，我们需要导入Metalsmith包和metalsmith-give插件如下：
const Metalsmith = require('metalsmith');
const give = require('metalsmith-give');在这里，我们使用命名导入来访问我们需要的metalsmith-give插件的give函数。
给定组件的使用
我们现在已经安装并配置了metalsmith-give插件。让我们学习如何应用给定组件并将它们集成到我们的Metalsmith项目中。 对于本教程，我们假定您已经有一个正在使用Metalsmith的项目。
让我们假设我们需要使用bootstrap。首先，我们需要在我们的项目中安装bootstrap。
npm install --save-dev bootstrap
现在我们可以使用metalsmith-give配置bootstrap。 修改代码如下所示：
-- -------------------- ---- -------
---------------------
-----
------
-------- ------------
------- ------------
------- ------------
--
-
---------我们不再需要使用import或require语句。相反，我们使用metalsmith-give的give函数来引入给定组件。在这里，我们传递给give函数一些选项：
- pattern - 用于搜索给定组件的模式。
- module - 给定组件的名称。
- expose - 这是给定组件的别名。expose选项指定我们在应用程序中使用模块的名称。
在这里，我们传递的模式是“bootstrap”。这意味着metalsmith-give会在我们的项目中搜索名称含有“bootstrap”的所有模块。 我们将module选项设置为“bootstrap”。将expose选项设置为“Bootstrap”。
我们现在应该可以使用Bootstrap在我们的Metalsmith项目中了。
具有多个给定组件
Metalsmith-give允许我们使用多个组件。 让我们假设我们还需要使用jQuery。让我们首先安装它：
npm install --save-dev jquery
现在，我们可以使用metalsmith-give与jquery集成。修改代码如下所示：
-- -------------------- ---- -------
---------------------
-----
------
-
-------- ------------
------- ------------
------- ------------
--
-
-------- ---------
------- ---------
------- ----
--
--
-
---------这里我们传递的选项是一个数组，其中包含所有给定组件的配置对象。这允许我们在应用程序中使用多个提供的组件。
在这里，我们传递了两个对象。 第一个对象与Bootstrap有关，第二个与jQuery有关。 我们使用不同的expose选项来设置两个预定义的别名。
我们现在可以在我们的应用程序中使用Bootstrap和jQuery了。
结论
在本文中，我们学习了如何在我们的Metalsmith应用程序中使用metalsmith-give插件。这使我们可以使用预定义组件，并将它们集成到我们的Metalsmith配置中。
重申一下，首先，我们使用npm将metalsmith-give安装到我们的项目中。接下来，我们导入Metalsmith和metalsmith-give插件，并将其配置到我们的Metalsmith环境中。然后，我们传递给定组件的配置对象，以便将它们集成到我们的Metalsmith配置中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f3f1d8e776d08040bb3