generator-betters 是一个用于创建 Web 开发项目的 Yeoman Generator(脚手架工具),通过它可以快速初始化一个完整的前端工程项目,同时也可以根据自己的需求来定制项目结构和配置,非常实用便捷。
安装
在使用 generator-betters 之前,我们需要先安装 Yeoman 和 Generator-betters:
npm install -g yo generator-betters
如果你还没有安装 Node.js,请先完成 Node.js 的安装,安装 Node.js 可以到官网下载 Node.js 安装包,或使用包管理器进行安装。
使用 generator-betters
使用 generator-betters 创建工程项目十分简单,只需要在命令行中输入以下命令即可:
yo betters
然后按照提示输入项目名称、项目描述和作者等信息,最后就可以选择需要安装的插件以及创建项目结构。
自定义 generator-betters
除了使用默认的模板之外,我们还可以自己进行定制的 Yeoman Generator。生成器内部使用了基础的模板语法来简化开发、提升重用性和依赖于 Node.js 的功能,同时也能够生成可读性强的开发指南。
首先,在命令行工具中,使用 yo 命令新建一个 generator:
yo generator
根据提示输入生成器的名称、描述等信息,可以看到在当前目录下会生成一个文件夹,其中包含了一个空白的生成器项目。
我们需要修改的文件主要包括:
generator/app/index.js
: 描述生成器的行为以及所执行的操作,例如将文件复制到新项目目录、渲染文件,等等。generator/templates
: 包含用于生成新项目的文件和文件夹。
在 generator/app/index.js 文件中,我们可以修改 Generator 的 options,从而指定所需要的功能特性。例如,可以创建一个包含测试文件的选项,如下所示:
-- -------------------- ---- ------- -------------- - ----- ------- --------- - ----------------- ----- - ----------- ------ -- -- --------- - ------- -------------------- - -------------- - ------------------- ---- ------ ------------------- - --
在 generator/app/index.js 文件中,我们也可以使用 this.prompt() 方法,为命令行询问用户参数。例如,可以询问用户是否需要添加 jQuery:
-- -------------------- ---- ------- ----- ------- --------- - ----- ----------- - ----- ------ - ----- ------------- ----- ---------- ----- ---------------- -------- ------ --- ---- -- ------- --------- --- -------------- ----------- ---------------------- - --
在 generator/app/index.js 文件中,我们还可以使用 this.fs.copy() 方法,从模板文件夹将文件复制到要生成的项目目录。例如,可以复制一个 .gitignore 文件:
-- -------------------- ---- ------- ----- ----------- - - ------------- -- ----- ------- --------- - --------- - -------------------------- -- - ------------- ------------------------ -------------------------------- -- --- - --
在完成所有定制之后,我们可以将生成器发布到 npm 上,其他人也可以使用我们的生成器来生成项目。
示例代码
以下是一个生成 React 项目的示例代码:
-- -------------------- ---- ------- -------------- - ----- ------- --------- - ----------------- ----- - ----------- ------ -- -- --------- - ------- -------------------- - ----- ----------- - ----- ------- - ----- ------------- - ----- -------- ----- ------- -------- ----- ------- ------ -------- ------------- -- ----------- -- - ----- -------- ----- -------------- -------- ----- ------- ------------- -------- ------------- -- - ----- -------- ----- --------- -------- ----- ------ ------ ------ ----- -- ----------------------- -- - ----- ---------- ----- ---------------- -------- ------ --- ---- -- ------- --------- -------- ----- -- --- ------------ - -------- - --------- - ----- ----------- - - ------------- --------------- ------------- ----------------- --------------- -- -------------------------- -- - ------------- ------------------------ --------------------------------------- ----- - -------- - ----- ------------------ ------------ ------------------------- ------- -------------------- -- - -- --- -- ---------------------------- - ------------- --------------------------------------- ----------------------------------------- -- - - --------- - -------------------------- ------ ------ ---- ----- ----- ------ --- - --
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600566c081e8991b448e3138