clsregister

ClassName Register

通过配置来生成全局className prefix

📦 安装

npm install clsregister --save-dev

yarn add clsregister --dev

使用方法

• 请在项目根目录新增clsregister.config.js文件来进行配置。
• 同时在package.json新增一条scripts

"scripts": {
+  "run-clsregister": "clsregister"
}

配置内容

属性	类型	描述
namespace	String	顶层前缀，会添加在每个className顶层，主要为了做样式的命名空间隔离，防止污染。
className	Object	具体的配置项，采用嵌套结构来表示类的上下层关系
middlewares	Function[]	生成不同类型的文件，需要配置不同的中间件

className配置

私有属性	类型	描述
key	String	对象的key，只要出现定义，就会注册至集合中。不允许出现重复值！
key._scoped_	Boolean	设置此属性为true，会自动与上级Key值进行拼接。
key._children_	String[]	如需要注册子className不需要携带任何属性，可以挂载在此属性上。
key._scopedChildren_	String[]	注册的子className都会携带_scoped_熟悉。

🔨 示例

基础定义

module.exports = {
  namespace: 'craig',
  className: {
    layout: {},
  },
};

此时layout字段会被注册，并生成带有命名空间前缀的className

{
  layout:'craig-layout'
}
;

嵌套组合

module.exports = {
  namespace: 'craig',
  className: {
    layout: {
      nav: {}
    },
  },
};

此时layout与nav字段均会被注册，并生成带有命名空间前缀的className

 {
  layout:'craig-layout',
    nav
:
  'craig-layout-nav'
}
;

如果担心nav容易与其他key值重复，可以添加_scoped_属性

module.exports = {
  namespace: 'craig',
  className: {
    layout: {
      nav: {_scoped_: true}
    },
  },
};

最终生成

 {
  layout:'craig-layout',
    layoutNav
:
  'craig-layout-nav'
}
;

按上述写法，如果key值较多，且都无子属性，则可以使用_children_和_scopedChildren_属性来简写

module.exports = {
  namespace: 'craig',
  className: {
    layout: {
      _children_: ['title', 'sider'],
      _scopedChildren_: ['nav', 'center'],
      main: {
        logo: {},
        button: {_scoped_: true}
      }
    },
  },
};

最终生成

 {
  layout:'craig-layout',
    title
:
  'craig-title',
    sider
:
  'craig-sider',
    layoutNav
:
  'craig-layout-nav',
    layoutCenter
:
  'craig-layout-center',
    main
:
  'craig-layout-main',
    logo
:
  'craig-layout-main-logo',
    mainButton
:
  'craig-layout-main-button',
}
;

middlewares配置

🔨 示例

middlewares的每一个元素都必须是一个函数，函数会接受到一个ctx对象和一个next函数

ctx对象包含属性

属性	类型	接收参数	描述
register	Function	具体请查看register函数入参解释	会返回当前注册成功的实例
getClassNames	Function	--	根据注册在register上的handler，返回string[]。可以请根据自己需求，组合成符合需求的数据。
writeFile	Function	data:string	会根据传入参数，执行写入操作。文件最终会生成在注册时填写的目录中。

register函数入参解释

参数	类型	必传	描述
path	String	是	写入配置的目标路径，以当前根目录（process.cwd()）为起点
filename	String	是	文件名 ，如出现同名文件会被覆盖，注册前请确认。
handler	Function	是	处理配置文件过程中，会将配置中的classNames拆分成数组，数组长度为所有注册的keys + 所有children。该函数类似于Array.prototype.map方法。接收key与value，用户可以根据自己的实际应用场景，来决定返回什么样的字符串。最终会根据handler生成对应的ClassNames，可以通过当前注册实例上的getClassNames获取到。

|

next方法

注册成功后，需要调用next()来告知处理器向下执行。 直至执行到最后一个中间件。全部中间件执行完成以后，会将所需数据挂载至对应实例上。 所以需要在next()方法调用后再写数据处理逻辑，否则是获取不到对应数据的。

使用方法

(ctx, next) => {
  const _ctx = ctx.register(
    'src/config/className',
    'cls.js',
    (key, value) => {
      return `  ${key}: '${value}'`;
    },
  );
  next();
  const data = `export default {\n${_ctx.getClassName().join(',\n')}\n};`;
  _ctx.writeFile(data);
}

如果需要异步处理，可使用：

async (ctx, next) => {
  const _ctx = ctx.register(
    'src/config/className',
    'cls.js',
    (key, value) => {
      return `  ${key}: '${value}'`;
    },
  );
  await next();
  const data = `export default {\n${_ctx.getClassName().join(',\n')}\n};`;
  _ctx.writeFile(data);
}

🆕 fastRegister快速注册中间件

可以通过引用fastRegister对象，使用中间件生成器来快速生成中间件。

如此配置便可以简化为：

+
const fastRegister = require('clsregister/fastRegister')
module.exports = {
  namespace: 'craig',
  className: {
    layout: {
      _children_: ['main', 'right'],
      _scopedChildren_: ['mains', 'rights'],
      nav: {},
      left: {
        _scoped_: true,
      },
    },
  },
  middlewares: [
    -(ctx, next)
=>
{
  -
  const _ctx = ctx.register(
    -'src/config/className',
    -'cls.js',
    -(key, value)
=>
  {
    -
    return `  ${key}: '${value}'`;
    -
  }
,
  -
)
  ;
  -next();
  -
  const data = `export default {\n${_ctx.getClassNames().join(',\n')}\n};`;
  -_ctx.writeFile(data);
  -
}
,
+fastRegister.js('src/config/className', 'cjs.js'),
],
}
;

fastRegister目前包含js、less、sass三类文件的中间件生成器。