在前端开发中，组件化已经成为了开发的标配。但是在组件化的过程中，我们也遇到了很多问题，比如组件的可复用性、兼容性等等。而 npm 包 Storybook 就是一个很好地解决了这些问题的工具。
什么是 npm 包 Storybook？
Storybook 是一个开源的 UI 开发环境，它允许我们在开发过程中，随时查看和调试组件库。它提供了一个独立的开发环境，可以实时查看和测试组件的各种状态，方便调试和开发。
安装与使用
在开始使用之前，我们需要首先全局安装 Storybook。步骤如下：
--- ------- -- --------------
安装完成后，我们就可以在项目中使用 Storybook 了。我们以 React 为例，先安装 React：
--- ------- ----- ------
然后在项目根目录下运行：
------------
这个命令将会在你的项目中创建一个 .storybook 的文件夹，其中包含了一些必要的文件。
打开文件 .storybook/config.js，可以看到如下内容：
------ - --------- - ---- ------------------- -------- ------------- - ------------------------------- - ---------------------- --------
这里向你展示了如何配置 Storybook，configure 方法接收一个数组，数组中是一个个 JS 文件路径，这些路径应该是包含了需要展示的组件的。在这里，配置中的 require('../stories/index.js') 将会导入项目中的组件。
好了，现在我们就需要创建 stories 目录，并将需要展示的组件以文件的形式存放在这个目录下。
创建 Stories
在 stories 目录下，我们需要创建一个新的 JS 文件，用于展示组件。以一个 Button 组件为例：
------ ----- ---- -------- ------ - --------- - ---- ------------------- ------ ------ ---- ---------------- ------------------- ------- ---------- ------ -- -- ------------- ------------------- ---------- ------ -- -- ---------- -- -- -------------
storiesOf 函数接受两个参数：展示的组件的名称和一个模块。
在 add 方法中，我们来编写该组件的各个状态。代码示例中，我们展示了一个带有文本的按钮，以及一个带有表情的按钮。
Storybook UI
好了，现在我们已经创建好了所有的 Stories。我们来运行 Storybook，并在浏览器中查看我们的组件吧：
--- --- ---------
在浏览器中打开 http://localhost:9001，你会看到现在的一个空白页面。你需要使用导航栏来浏览你的组件：
你可以看到，所有的状态都被展示出来，并且 Storybook 还提供了交互式的组件开发环境。
在项目中使用 Storybook
现在我们已经能够在 Storybook 中完成组件的开发和测试了，但是我们需要如何在项目中使用这些组件呢？
第一步，我们需要将 npm 包中的组件编译成可供使用的文件，比如通过使用 Babel 将 React 代码转换为 ES5：
--- ------- ---------- --------- ------------------
然后，在根目录下新建 .babelrc，写入如下内容：
- ---------- ---------------------- -
现在我们已经为编译 React 组件做好了准备。接下来，我们需要使用 Webpack 来实现组件的打包。
将组件打包为可复用的文件
在 webpack 中，我们要使用 babel-loader 来处理 babel 编译。我们也需要它来将 ES6 转义为 ES5 并允许在我们项目的所有文件中使用 React（和其他一些新颖的 JavaScript 特性）。
--- ------- ---------- ------- ------------
webpack.config.js 配置：
-------------- - -
-- ---- -- --- ------ ---- ----- ------ ------- --- ----- -------
------ -----------------
-- ----- ------ --- -------- ---- ---
------- -
--------- ------------
----- --------- - --------
--
------- -
-- ------- ----------- -----
------ -
-
-- --- ------- -- ------ -- ---- ---- ---- ---- ---- ---- ----- ---- ----------
----- --------
-- --------- -- ---- -----
---- ---------------
-- ----- --------- ------------ ------ ------ ----- ---- -- -- ---------
-------- ---------------
--
--
--
-- ------ --------- -- ----- ------- ---------- ------- ----------
-------- -
----------- --------
--
--这只是一个简单的示例，仅仅向您展示了如何配置 loaders。
在项目中使用组件
好的，现在，我们已经将组件编译和打包为可复用的文件，它可以作为独立的模块在其他项目中使用。
只需要在你的项目的 package.json 中添加依赖：
--------------- -
---------------------------------- -------
-然后在你项目的 JS 文件中使用它：
------ - ------ - ---- ----------------------------------
----------------
-------------- ----------------
-------------------------------
--现在，我们就可以使用 npm 包 Storybook 来提高我们的组件化开发的效率和质量了。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/193952