npm 是 Node.js 的包管理器，可以方便地下载和管理各种 Node.js 模块。generator-nbg-component 是 npm 上比较好用的一个生成前端组件的工具包，可以帮助前端开发工程师快速搭建项目，提高前端代码的可复用性和开发效率。
什么是 generator-nbg-component？
generator-nbg-component 是一个 Yeoman generator，也就是一个快速构建前端工程项目的脚手架。
这个工具包可以生成包含 React 组件、Sass 样式表、Markdown 说明文档和测试文件的前端组件，而且可以自定义组件名称、组件描述和组件路径等等。
如何安装和使用 generator-nbg-component？
安装 generator-nbg-component 只需要在 Node.js 的命令行界面下执行以下命令即可：
npm install -g generator-nbg-component
安装成功后，在命令行中输入以下命令即可使用：
yo nbg-component
这个命令会提示你输入生成的组件名称、组件描述和输出文件夹路径等信息，按照提示进行输入即可生成组件代码。
generator-nbg-component 的组成部分
生成的前端组件包含四个主要部分：
- components/：包含 React 组件的 JavaScript 文件。
- scss/：包含 Sass 样式表文件。
- README.md：组件的说明文档。
- test/：包含测试文件。
其中 components/ 文件夹包含了组件的 JavaScript 文件，其中包括组件自身的源代码，以及样式和数据等附属代码。在这个文件夹中，你还可以使用自己的编码习惯来组织组件的代码，这样可以使组件更具有可读性和可复用性。
scss/ 文件夹包含了 Sass 样式表文件。
README.md 文件则是组件的说明文档。在这个文件中，你可以对组件进行详细的介绍，包括它的功能、使用方法和示例。README.md 文件最后也可以包含其他文档或链接，以帮助用户更好地理解组件的使用。
test/ 文件夹则包含了组件的测试文件。测试文件可以确保组件的正确性，避免了将有错误的组件添加到项目中的风险。测试文件也可以作为组件文档的一部分，让其他人更好地理解组件的特性和用法。
一个简单的例子
下面是使用 generator-nbg-component 生成的示例代码：
-- -------------------- ---- ------- -- ------------- - --------- --------------------------- - ---- ----------------------- -------- -------------------- - ------------- - --- --------- - --- ----------- - - --- -------------- - --- -------- - --- ------------ - --- ----- - - --- ----------------- - --- ----- - --- -------------------
在 components/ 文件夹中，你可以将组件的代码打包在一个单独的文件中，例如 MyComponent.js：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ---------------------------
------ ------- ----- ----------- ------- --------- -
-------- -
------ -
---- -------------------------
-- ---------
------
--
-
-在 scss/ 文件夹中，你可以添加 Sass 样式表文件 my-component.scss，定义组件的样式：
.my-component {
color: red;
}在 test/ 文件夹中，你可以添加测试文件 MyComponent-test.js，测试组件的正确性：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------------------
----------------------- -- -- -
---------- ------ --- ------- -------- -- -- -
----- ------- - -------------------- ----
--------------------------------------------------------
-------------------------------------------------------- ------------
---
---在 README.md 文件中，你可以对组件进行详细的介绍：
-- -------------------- ---- ------- - ----------- ----------- -- - ------ ----- --------- ---- ----- --- ---- --- ---------- -- ---- -- ------------ ------- -------------- ----- ---- ---------- --- ------- ------------
Usage
import MyComponent from 'my-component';
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<MyComponent />, document.getElementById('root'));Example
import MyComponent from 'my-component';
-- -------------------- ---- ------- -- -- ----------------------- ---------------------------------------------------------------- --- ------------------- --- ----------------------- ---------- ----- ------ ---- ------------------------------------------------- - ------------------------------------------------------------------------------ -------- ------------------------------------------------------------------------------------------------------------------------