npm 包 @whcg/generator-whcg-component 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，组件化已经成为一种不可或缺的开发方式。如何快速高效的生成组件成为了一个亟待解决的问题。

在这篇文章中，我们将介绍一个 npm 包 @whcg/generator-whcg-component，它可以快速方便的帮助我们生成一个遵循最佳实践的 React 组件。同时，我们也将详细介绍这个 npm 包的使用方法，并提供实际的代码示例。

安装 @whcg/generator-whcg-component

首先，我们需要在本地环境中全局安装 @whcg/generator-whcg-component。执行以下命令即可：

npm install --global @whcg/generator-whcg-component

创建组件

安装完成之后，我们就可以使用 generator-whcg-component 帮助我们创建组件了。

yo @whcg/whcg-component

执行上面的命令之后，generator 会询问你的组件名称，以及组件需要的 props，这些问题都需要你一一回答。其中，组件名称需要采用 PascalCase 命名方式。

回答完成之后，generator 会自动生成组件的骨架，并将其放置在指定目录下。默认情况下，所生成的组件目录是当前路径下与组件名称相同。

下面是生成的组件目录结构及其简介。

-- -------------------- ---- -------
-----------
--- ----------
--- ------------
--- ---------
--- ---
-   --- --------
-   --- --------------
--- ----
-   --- -------------------
--- ---------
    --- ----------------------

.gitignore：忽略 git 推送。
package.json：组件的描述文件。
README.md：组件的使用文档。
src/index.js：导出 MyComponent 组件。
src/MyComponent.js：组件的主要代码。
tests/TestComponent.test.js：组件测试代码。
story/MyComponent.stories.js：组件 Storybook 示例说明。

快速构建组件

generator 会为你自动生成组件的骨架，但是在实际的开发过程中，我们还需要做很多的工作：解决依赖、添加样式、编写组件逻辑等等。

为了解决这些问题，@whcg/generator-whcg-component 还可以帮助我们轻松快速完成这些工作。以下是这些工作的具体步骤。

添加样式

组件的样式是其外表的重要组成部分。@whcg/generator-whcg-component 提供了 Sass 和 CSS 样式的支持，你可以根据自己的喜好选择样式的写法。

要使用 Sass，你需要在组件目录下创建一个名为 MyComponent.scss 的文件。generator 会自动将这个文件引入到组件 js 文件中。

要使用 CSS，你需要在组件目录下创建一个名为 MyComponent.css 的文件。generator 会自动将这个文件引入到组件 js 文件中。

添加依赖

组件为什么强大，除了它本身的功能外，还有一部分原因是因为其所使用的第三方库。

@whcg/generator-whcg-component 使用了 npm 来管理组件的依赖。你可以使用 npm install 来添加你需要的依赖。

在安装完依赖后，你可以在组件 js 文件中使用它们。在我们的组件样例中，它使用了 React 和 PropTypes。

组件逻辑

@whcg/generator-whcg-component 为我们生成了骨架代码，但是我们还需要实现这个组件，给它添加任何逻辑。下面是组件的生命周期方法及其发送事件的示例代码：

-- -------------------- ---- -------
------ ------ - ------------- - ---- --------
------ --------- ---- -------------

----- ----------- ------- ------------- -
  ------------------ -
    ----- - ------- - - -----------
    -- --------- -
      ---------------
    -
  -

  ------------------- -
    ----- - ------- - - -----------
    -- --------- -
      ----------
    -
  -

  -------- -
    ----- - ---------- -------- - - -----------
    ------ -
      -------
        ----------- --------- -
        --------- --------------------------- --
        ----------
      ---------
    --
  -
-

--------------------- - -
  ---------- -----------------
  -------- ---------------
  -------- ---------------
  --------- --------------------------
--

------ ------- ------------

如上所述，组件有以下生命周期方法：

componentDidMount 用于组件挂载到 dom 上之后调用，通常在这个方法中可以请求服务器端数据，更新组件的 state 等。
componentWillUnmount 用于组件卸载之前，做一些清除工作。
componentDidUpdate 用于组件更新之后。

文档与测试

文档是组件的重要组成部分，它帮助用户快速了解组件的用途和使用方法。@whcg/generator-whcg-component 提供了 Storybook 用于帮助我们快速生成文档和样例。

下面是 Storybook 的安装和启动过程：

npx sb init
npm run storybook

结语

在这篇文章中，我们详细介绍了 @whcg/generator-whcg-component 的用法。使用它可以帮助我们快速的创建一个 React 组件，同时也可以帮助我们管理组件的依赖、添加样式、编写组件的逻辑。

希望这篇文章对你有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60065f71238a385564ab6762

npm 包 @whcg/generator-whcg-component 使用教程

前言