简介
generator-heirloom 是一个基于 Yeoman 的前端脚手架工具，提供了一些常用的前端项目模板，如 Webpack、React、Angular 等等。使用该工具可以快速生成项目骨架，节省搭建项目的时间，提高开发效率。
安装
在安装 generator-heirloom 之前，需要先安装 Yeoman：
npm i -g yo
安装完成之后，可以通过 npm 安装 generator-heirloom：
npm i -g generator-heirloom
使用
初始化项目
在终端中输入以下命令：
yo heirloom
这时会提示你选择需要使用的项目模板，根据你的实际需求选择即可。例如选择 React 模板，会要求你输入项目名称、项目描述、作者等相关信息。
添加页面
在项目目录中，打开终端，输入以下命令：
yo heirloom:page
这时会提示你输入需要添加的页面名称，例如 "home"。这样就可以在 src/pages 目录下自动生成一个包含基础结构的 "home" 页面。
添加组件
在项目目录中，打开终端，输入以下命令：
yo heirloom:component
这时会提示你输入需要添加的组件名称，例如 "Header"。这样就可以在 src/components 目录下自动生成一个包含基础结构的 "Header" 组件。
添加样式
在项目目录中，打开终端，输入以下命令：
yo heirloom:sass
这时会在 src/styles 目录下自动生成一个基础的样式文件 main.scss。
示例代码
// main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));-- -------------------- ---- -------
-- ------
------ ----- ---- --------
------ ------ ---- ----------------------
------ ---- ---- ---------------
------ ---------------------
-------- ----- -
------ -
--
------- --
----- --
---
--
-
------ ------- ------ -------------------- ---- ------- ---- ---------- --- --------- ----- ----- ---------- ------ ----- ---------------- --------- ----------- ------- ------ ---- ---------------- ------- -------
-- -------------------- ---- ------- -- ----------- ------- - ------- ----- ----------------- -------- ------ ----- ----------- ------- ------------ ----- -
总结
generator-heirloom 是一个非常有用的前端脚手架工具，可以大大提高前端项目的开发效率。同时也可以通过学习其源码，深入了解前端脚手架的原理及实现方式，对前端开发产生指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600558a181e8991b448d5ee7