generator-es6-component 是一个通用的 ES6 组件生成器，可以帮助前端开发者快速创建符合 ES6 标准的组件。
安装
使用以下命令安装 generator-es6-component
npm install -g generator-es6-component
使用
运行以下命令
yo es6-component
根据提示输入组件名称和组件描述，generator-es6-component 会自动创建一个符合 ES6 标准的组件目录，其中包括以下文件：
src/ index.js // 组件入口文件 Component.js // 组件类文件 test/ Component.spec.js // 组件测试文件
index.js
在 index.js 中，我们需要引入组件类，并将其导出。这样其他模块就可以通过这个模块来使用该组件了。
import Component from './Component'; export default Component;
Component.js
在 Component.js 中，我们定义了一个 ES6 class，它是一个典型的 React 组件。这里我们可以定义组件的状态、props、生命周期函数、渲染函数等。
-- -------------------- ---- -------
------ ----- ---- --------
----- --------- ------- --------------- -
------------------ -
-------------
---------- - ---
-
-------- -
------ -
----------- ------------------------
--
-
-
------ ------- ----------Component.spec.js
在 Component.spec.js 中，我们使用 Jest 来对组件进行测试，检查组件的行为是否符合预期。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ --------- ---- -------------------
--------------------- -- -- -
---------- ------ ------ -- -- -
----- ------- - ------------------ ------------ ----
----------------------------------- ---------
---
---总结
generator-es6-component 可以帮助我们快速创建符合 ES6 标准的组件，从而提高我们的开发效率。同时，我们也可以通过本文所示的文件结构，了解一个精简的组件具体应该如何实现，很好的对我们的学习和工作有指导意义。
示例代码
你也可以从这里找到本文的完整示例代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005533981e8991b448d07ce