简介
yemma-discovery 是一个用于前端的 npm 包，它可以帮助你自动扫描特定目录下的所有组件，将它们注册到一个 Vue.js 组件库中，方便你在工程项目中使用。
这个 npm 包的设计初衷是为了让组件库的管理更加简单，旨在提高前端工程师在开发过程中的生产力，也可以服务于前端团队全局的组件管理。
安装 yemma-discovery
你可以通过 npm 来安装 yemma-discovery：
npm install yemma-discovery --save-dev
使用 yemma-discovery
配置 yemma-discovery
安装完 yemma-discovery 后，需要在工程项目中新建一个存放组件的目录，如 "components" 目录，并在项目根目录中创建一个 "discovery.config.js" 文件，用于配置 yemma-discovery。
在 config 文件中，你需要指定以下几个配置信息：
module.exports = {
componentDir: 'src/components', // 组件目录，这里指定为 src/components
outputFile: 'components.js' // 指定输出文件名
}注册组件
在 "components" 目录下，新建一个 Vue 组件，如 "MyComponent.vue"，并在该组件中定义组件名称，如 "my-component"，如下所示：
-- -------------------- ---- -------
----------
-----
---- ---- ---
------
-----------
--------
------ ------- -
----- ---------------
-- ---
-
---------然后，在你的项目根目录中，执行以下命令：
yemma-discover
执行该命令后，yemma-discovery 将会自动扫描 "src/components" 目录下的所有组件，并将它们注册到一个 Vue.js 组件库中。在执行完毕后，yemma-discovery 将会在项目根目录下生成一个文件 "components.js"，该文件包含了你所有的组件。
在项目中使用组件
在需要使用组件的地方，你只需引入 "components.js" 文件，并按照所需的组件名称来使用组件，如下所示：
-- -------------------- ---- -------
------ --- ---- -----
------ ---------- ---- -----------------
-- -----
--------------------------------------------- -- -
---------------------------- --------------------------
--
-- ----
--- -----
-- ---
--------- -
-----
-----------------------------
------
-
--这样，你就可以愉快地使用在 yemma-discovery 中注册的 Vue.js 组件库中的组件了。
总结
本文介绍了如何使用 yemma-discovery 这个 npm 包来帮助你自动扫描特定目录下的所有组件，将它们注册到一个 Vue.js 组件库中，以及在项目中使用组件的方法。
相信通过本文的介绍，你已经能够快速上手使用 yemma-discovery，提高前端开发效率了。希望本文对大家有一定帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/80308