前端开发过程中，经常需要实现一些共用逻辑或者跨组件或者跨项目共用的代码，此时，可以采用 npm 包的方式来将共用的逻辑包装成一个包，供其它项目使用，避免每个项目都需要重新开发一遍。本文将介绍一个提供前端业务组件样式管理的 npm 包 @sugarcoated/fondant-provider 的使用方法。
fondant-provider 简介
@sugarcoated/fondant-provider 是一款前端业务组件样式管理工具，可以帮助前端团队有效管理业务组件样式，使其在多个不同技术栈和不同项目中得到复用，提高项目开发效率。
fondant-provider 采用了 fondant-adapter 的方式，对业务组件进行样式的管理，在使用方面通过提供按需生成所需业务样式表，将样式直接注入到需要的业务组件中。
使用步骤
安装 fondant-provider
首先，需要在项目中安装 fondant-provider，执行以下命令：
npm install --save @sugarcoated/fondant-provider
在安装完成后，可以在项目中使用 fondant-provider。接着，需要定义样式范围的项目。在本文的示例中，假设样式定义的范围是在一个示例项目下。
初始化 fondant-provider
-- -------------------- ---- ------- ------ - --------------- - ---- -------------------------------- ----- - --------------- ---------- - - --- ----------------- -- ------ -- ------ ---------- ------ ----- -------- -------- -- - --------- --- -- -- ---
声明并注入组件样式
考虑到在业务组件中，需要引入 fondant-adapter 并声明使用的组件样式，具体示例如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------------- - ---- --------------------------------
----- ----------- - -- ------ -- -- -
---- ------------------------
---- ------------------------ --
------
--
----- ------ - -----------------------------
----- -
------ ------
--
------ -
------ -------
--
---
---------------------------- --------------- --- ---------------------------------
通过 fondantAdapter.createStyles 方法可以创建一个样式组件 styles，它是一个含有一些样式和一个 className，使用样式只需要在元素设置它对应的 className。
根据需求生成业务组件样式表
通过使用方法 createStyles，只是定义了组件样式，但没有真正将组件样式添加到样式表中。fondantProvider 中提供了一些方法，以生成业务组件样式表：
- build（适用于开发模式）：根据现有的样式表按需生成业务组件样式。在使用时，调用此方法后，会在调用位置生成对应的样式表，并返回 group 对象。
- freezeBuild(适用于正常模式)：在定义完组件样式后，根据样式表生成业务组件样式，并将其固化成一个不可再次修改的对象，不需要在运行时进行动态样式生成。
完整代码片段
如下所示，是一个完整的样式注入代码示例。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - --------------- - ---- --------------------------------
----- - --------------- ---------- - - --- -----------------
------ ----------
------ -----
-------- --------
---
----- ----------- - -- ------ -- -- -
---- ------------------------
---- ------------------------ --
------
--
----- ------ - -----------------------------
----- -
------ ------
--
------ -
------ -------
--
---
----- ----- - -----------------------------
---------------------------- -------------- --- ---------------------------------总结
@sugarcoated/fondant-provider 是一款前端业务组件样式管理工具，可以帮助前端团队有效管理业务组件样式，提高项目开发效率。使用该工具时，需要通过构建组件样式，并根据需求生成业务组件样式表，再将其注入到业务组件中。在实际开发过程中，可以根据不同项目的需求，定制出适合自己的业务组件模块。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572da81e8991b448e9101