前言
前端开发一个重要的工作就是构建自己的项目。在项目开发过程中，我们需要处理很多的事情，包括但不限于项目结构、编译工具、编译器等等，这一切的一切都是为了提升我们的开发体验和代码质量。
其中一个重要的工具就是 neutrino-preset-component，它是一个极其好用的工具包，可以让我们更加轻松地构建 React 组件库。
在本文中，我们将详细介绍如何使用 neutrino-preset-component 来构建自己的组件库，并且包含相对深度的讲解和学习指导。
neutrino-preset-component 是什么？
neutrino-preset-component 是一个基于 Neutrino 的预设，采用 Webpack 工具构建 React 组件库的速成项目。它帮助我们处理好所有的问题，包括但不限于以下内容：
- 配置 TypeScript 或 Flow 类型检查器
- 集成 Jest 单元测试工具
- 集成 ESlint 代码检查工具
- 集成 Prettier 代码格式化工具
- 支持开发实时预览
- 支持 npm 包导出
使用 neutrino-preset-component 可以让我们更加聚焦于组件本身的开发工作，而不需要花费太多时间在通用建设上。
neutrino-preset-component 怎么使用？
首先，我们需要先安装使用 Neutrino 的基础工具链：
npm install --save-dev @neutrinojs/core @neutrinojs/web
接着，我们需要安装 neutrino-preset-component 工具包：
npm install --save-dev @neutrinojs/component neutrino-preset-component
一般来说，我们最好创建一个单独的目录来存放我们的组件库项目。在这个目录下，我们新建一个 package.json 文件，然后加入以下内容：
-- -------------------- ---- -------
-
------- -------------------
---------- --------
-------------- --- ------- ----- --------- ---------
---------- -
-------- --------- -------
-------- --------- -------
------- --------- ------
----------------- ---- --- ------
-
-其中，name、version、description 等字段可以根据个人项目的需要修改。
接着，新增一个 neutrino.config.js 文件，并加入下列代码：
-- -------------------- ---- -------
----- - ---- - - ----------------
----- - ----------------- - - ---------------------------------------
----- - -------- -------- - - ---------------------------------
----- - ------------ - - -------------------
----- ----------------- - --- --------------------
-------------- - --- ----------
-----------------------
----------
------- --------------- --------
------ -
------ -
----- -----------------
--------- ----------
-
--
----- -
------ --- --------- ---------
------ -
-----------------------------------------------------------------
-----------------------------------------------------------------------------------
--
-------- -
-----------------------------------------------------------------------------
-
--
---------- -
------ ------
----- ----
-
--
----------------------------- -
----- -
------ --- --------- ------- ---------------
------ -
- ---- ------------- ----- ---------------------------------------------------------------- -
--
-------- -
-----------------------------------------------------------------------------
-
--
------ -
-------- -
-
--------------------
-
-------- -
--------- ------ - ---------- ------- -- ---
-
-
--
----------------------
--------------------------
--
-------- -
------------------------------------------
----------------------------------
-
---------------------------------
-
---- -----
-
-
-
--
------- -
----------- -
---- -
-------- ----
--
-------- -
---------------------
--------------------------
--
--------- -
------ -
-------- --------
-
--
-------------- -
------------ -----
----------- ---------
------------- -
---- ----
-
-
-
--
----- -
---------- -
-----------------------------
-----------------------------
--
-------------------- -------------------------
------------------- -
-----------------------------
--
------------------ -
------- -
--------- ----
---------- ----
------ ----
----------- ---
-
--
-------------------- -
---------------------------
-----------------
-------------------------------
--
------------------ -
-------
-------
------
-
--
------------ -
--------------- --------- -------- ------ ------- ---------- -------
--
-------- -
-------- -
--- --------------
------------ --------------------------------------------
--------------- -----------------------------------------------
----------- ------------------------------------------
--
-
-
---以上代码涵盖了 neutrino-preset-component 工具包所包含的绝大部分配置，当然也包括了一些额外的配置和插件。
我们在以上代码中设置了 3 个 scripts，分别是 start、build、test。其中，start 命令用于启动开发服务器，build 命令用于打包构建项目，test 命令用于运行单元测试。
在 neutrino.config.js 文件中，我们使用了 GitRevisionPlugin 插件来获得当前代码的版本号、commit hash 等信息。另外也设置了 babel、eslint、jest 等工具的基础配置。
接着，我们在项目根目录下新增一个 src 目录，并新增一个 MyComponent.js 文件，写入以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
----- ----------- - -- ---- -- -- -
-----
------
------
--
------ ------- ------------同时，题外话，我们也需要新增一个 setupTests.js 文件，里面写入以下代码：
import '@testing-library/jest-dom/extend-expect';
接着，我们运行 npm run start，就能看到一个简单的开发服务器已经启动了。我们可以在浏览器中输入 http://localhost:5000/ 来进入实时预览页面。
如果想要打包构建文档，我们可以运行 npm run build，构建完成后项目文档会存储在 dist 目录下。
如果想要运行单元测试，我们可以运行 npm run test。
这里需要注意，由于 neutrino-preset-component 中引用了 Jest 26.x 版本，推荐我们的代码也从 Jest 24.x 版本升级到 26.x 版本。
总结
本篇文章介绍了一个非常实用的 npm 包 neutrino-preset-component。通过 neutrino-preset-component 我们能够更加轻松地构建自己的 React 组件库，同时也可以学习到一些与组件开发密切相关的工具们，其中包括：TypeScript、Jest、ESLint 等等。
希望本文能对大家有所帮助，如果你有更好的建议或者想法，欢迎在下方评论区与我们进行交流。
附上完整代码：（见下文）
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055e5181e8991b448dbbfb