前言
yo-sweetener 是一个基于 Yeoman 和 Sweet.js 的 npm 包，它可以让你快速地自定义生成器的语法，使你的生成器更加易读和易用。
在本文中，我们将探索 yo-sweetener 的使用方法，包括安装，配置和使用。最后我们将构建一个简单的生成器并演示如何使用 yo-sweetener 来自定义语法。
安装 yo-sweetener
安装 yo-sweetener 很简单，只需使用以下命令：
npm install -g yo-sweetener
这将全局安装 yo-sweetener，使你可以在全局范围内使用它。
配置 yo-sweetener
在使用 yo-sweetener 之前，你需要创建一个配置文件 sweetener.json。该文件用于指定要使用的 Sweet.js 宏和生成器的位置。
以下是一个示例配置文件：
-- -------------------- ---- -------
-
--------- -
-------------------
----------------------
--
------------- -
-------------------
-
-在上面的示例中，我们指定了两个 Sweet.js 宏和一个生成器。
使用 yo-sweetener
要使用 yo-sweetener 创建生成器，你可以像创建一个普通的 Yeoman 生成器一样使用 yo。例如，要创建一个名为 mygen 的生成器，可以使用以下命令：
yo sweetener mygen
该命令将在当前目录中创建一个名为 mygen 的文件夹，并生成基础的生成器结构。你可以按照 Yeoman 的标准方式将你的生成器添加到该结构中。
使用宏来自定义语法
现在我们已经创建了一个基本的生成器，接下来让我们通过定义一些 Sweet.js 宏来自定义我们的语法。
在 Sweet.js 中，宏是一种将源代码转换为其他代码的机制。使用宏，你可以将自定义语法添加到生成器中，使它更容易阅读和编写。
例如，以下是一个标准的 Yeoman 语句：
this.fs.copy(this.templatePath('index.html'), this.destinationPath('index.html'));可以使用 Promisify 宏将其转换为以下语句：
await this.fs.promisify(this.fs.copy)(this.templatePath('index.html'), this.destinationPath('index.html'));在上面的代码中，我们使用了 await 和 promisify 宏来消除回调地狱并使代码更加易读。
我们的例子
以下是一个使用 yo-sweetener 创建的基本生成器的示例，它将从用户输入获取项目名称并在 README.md 文件中使用宏自定义语法。
首先，创建一个名为 generator-mygen 的目录，并在其中添加以下文件：
package.json
{
"name": "generator-mygen",
"version": "0.1.0",
"dependencies": {
"yeoman-generator": "^4.14.1"
}
}app/index.js
-- -------------------- ---- -------
----- --------- - ----------------------------
-------------- - ----- ------- --------- -
----- ----------- -
----- - ----------- - - ----- -------------
-
----- --------
----- --------------
-------- ------ ------- -------
--
---
---------- - - ----------- --
-
--------- -
-------------
-------------------------------
---------------------------------
--
-
--app/templates/README.md
# <%= this.props.projectName %> This is a <%= this.props.projectName %> project. ## Installation To install dependencies, run:
npm install
## Usage To start the application, run:
npm start
sweetener.json
{
"macros": ["macros/promisify.mac"],
"generators": ["app"]
}macros/promisify.mac
macro promisify {
case { (ident) (method (.+)) } => {
const methodName = unwrapSyntax(method);
return #`await this.fs.promisify(${ident}.${methodName})`;
}
}
export promisify;运行以下命令启动生成器：
yo sweetener mygen
当提示用户输入项目名称时，键入任意值。这将创建一个名为 mygen 的目录，并在其中创建一个名为 README.md 的文件。
打开 README.md 文件，你将看到类似于以下内容的自定义语法：
# <%= this.props.projectName %>
结论
在本文中，我们介绍了如何使用 Yo-Sweetener 创建 Yeoman 生成器并自定义其语法。了解如何使用 Yo-Sweetener 创建自定义语法将帮助你更轻松地构建易读和易用的生成器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005724681e8991b448e85e3