yeoman
by Krist Wongsuphasawat
克里斯特·旺蘇帕薩瓦(Krist Wongsuphasawat)
使用yeoman輕松創建Yeoman生成器 (Creating Yeoman generators easily with yeoman-easily)
I’ve used Yeoman to start many of my projects. It’s an amazing web scaffolding tool.
我已經用Yeoman開始了許多項目。 這是一個了不起的Web腳手架工具。
But after creating my own generators several times, I saw the repetitive tasks, somewhat lengthy code, and part of the generator code that confused me every time.
但是,在幾次創建自己的生成器之后,我看到了重復的任務,有些冗長的代碼以及部分生成器代碼,這些代碼每次都使我感到困惑。
At one point, I ended up hacking a small utility that I kept copying over and over from project to project. I spent a weekend organizing it and adding several more features to take care of repetitive tasks.
有一次,我最終入侵了一個小實用程序,并不斷在項目之間進行復制。 我花了一個周末組織它,并添加了更多功能來處理重復的任務。
約曼很容易誕生。 (And yeoman-easily was born.)
yeoman-easily helps with the following tasks when creating a generator with Yeoman:
使用Yeoman創建生成器時,yeoman- 輕松地幫助完成以下任務:
優勢1:確認 (Advantage 1: Confirmation)
Often you would like to ask for user confirmation before proceeding. The first code block below shows how to write this with plain Yeoman. The second code block shows how to write it with the help of yeoman-easily.
通常,您需要在繼續操作之前要求用戶確認。 下面的第一個代碼塊顯示了如何使用普通Yeoman編寫此代碼。 第二個代碼塊顯示了如何在yeoman的幫助下輕松編寫它。
With yeoman-easily, you can ask for confirmation before proceeding in one line. easily.confirmBeforeStart(message)
then easily.checkForConfirmation()
returns the result.
使用yeoman,您可以輕松地在一行之前進行確認。 easily.confirmBeforeStart(message)
然后easily.checkForConfirmation()
返回結果。
優勢2:提示 (Advantage #2: Prompting)
Handling results from the prompt, then choosing which prompt to display used to be complicated.
處理來自提示的結果,然后選擇要顯示的提示曾經很復雜。
this.prompt()
returns a promise which needs to be handled to obtain the answers and store them. The answers are commonly stored intothis.props
. This block of code has to be written again and again.this.prompt()
返回一個promise,需要對其進行處理才能獲得答案并存儲它們。 答案通常存儲在this.props
。 此代碼塊必須一次又一次地編寫。A parent generator often passes the parameters to the child generator via options. From what I have seen, many generators will hide the prompts for fields that are present in the options. (Yes, you have to write code to check that.) Then combine answers from prompts and options into
this.props
.父生成器通常通過選項將參數傳遞給子生成器。 據我所知,許多生成器將隱藏選項中存在的字段提示。 (是的,您必須編寫代碼進行檢查。)然后將提示和選項的答案合并到
this.props
。
For convenience, yeoman-easily:
為了方便起見,您可以輕松地:
Handles storing user’s answers from the prompts into
this.props
. Just calleasily.prompt(prompts)
instead ofthis.prompt(prompts)
處理將來自提示的用戶答案存儲到
this.props
。 只需easily.prompt(prompts)
調用easily.prompt(prompts)
而不是this.prompt(prompts)
Can automatically skip a prompt if an option with the same name is present. It will also copy the value of existing
this.options[field]
intothis.props[field]
.如果存在具有相同名稱的選項,則可以自動跳過提示。 它還會將現有
this.options[field]
的值復制到this.props[field]
。Can register common prompts via
easily.learnPrompts(prompts)
and allow looking up prompts by name while callingeasily.prompt()
. This can save a lot of time if you create multiple generators that ask similar questions.可以通過以下方式注冊常見提示
easily.learnPrompts(prompts)
并允許在調用easily.prompt()
按名稱查找提示。 如果創建多個生成器來詢問類似的問題,則可以節省大量時間。
優勢3:撰寫 (Advantage #3: Composing)
Yeoman generator can call (composeWith
) another generator from another package or local subgenerator, but the current syntax for doing so is somewhat long. I am still not sure what the local field means.
Yeoman生成器可以從另一個包或本地子生成器調用( composeWith
)另一個生成器,但是當前的語法有些長。 我仍然不確定本地領域的含義。
yeoman-easily simplifies the syntax to easily.composeWithLocal(name, namespace, options)
and easily.composeWithExternal(package, namespace, options)
.
easily.composeWithLocal(name, namespace, options)
輕松地將語法簡化為easily.composeWithLocal(name, namespace, options)
和easily.composeWithExternal(package, namespace, options)
。
優勢4:文件處理 (Advantage #4: File handling)
Yeoman provides flexible APIs for file handling to cover many scenarios. But it takes a few lines to perform common task such as copying a file from the template directory to the destination directory. A function for bulk copying also exists, but it’s discouraged.
Yeoman提供了靈活的API用于文件處理,以涵蓋許多情況。 但是執行常見任務需要花費幾行,例如將文件從模板目錄復制到目標目錄。 還存在用于批量復制的功能,但不建議使用。
To address the above issues, yeoman-easily:
為了解決上述問題,可以輕松地:
Provides I/O functions that wraps
this.fs.xxx
and also resolves template and destination directory for common cases (from template to destination). These functions includeread
,write
,writeJSON
,extendJSON
,exists
,copy
, andcopyTemplate
. I have a full list in my API documentation.提供包裝
this.fs.xxx
I / O函數,并為常見情況(從模板到目標)解析模板和目標目錄。 這些功能包括read
,write
,writeJSON
,extendJSON
,exists
,copy
和copyTemplate
。 我的API文檔中有完整列表。Provides functions for mass copying both static and dynamic files based on glob pattern. See
easily.copyFiles(…)
in the example below.提供用于基于全局模式批量復制靜態和動態文件的功能。 請參見以下示例中的
easily.copyFiles(…)
。
優勢5:方法鏈接 (Advantage 5: Method chaining)
yeoman-easily was created with chaining in mind and support method chaining for fluent coding.
yeoman-easily創建時考慮了鏈接,并為流暢的編碼提供了支持方法鏈接。
全部放在一起 (Putting it all together)
Here’s an example that demonstrates all of these advantages together into one generator:
下面的示例將所有這些優點一起展示到一個生成器中:
The yeoman-easily package is now available on npm. Visit the github repo for more details, API documentation and examples. I welcome your pull requests and bug reports.
yeoman輕松軟件包現在在npm上可用。 請訪問github repo獲取更多詳細信息, API文檔和示例。 我歡迎您的請求請求和錯誤報告。
翻譯自: https://www.freecodecamp.org/news/creating-yeoman-generators-easily-with-yeoman-easily-cf552aef0d2f/
yeoman