优质广告供应商

广告是为了更好地支持作者创作

webpack开发- less 插件

虽然Less 已经用了很长时间,但主要使用的还是他的嵌套功能,最近负责构建相关的工作,稍微了解了些,但到Less定制化插件的部分后,相关的文档少的可怜,只好自己对着源码慢慢尝试。

更新时间
第一次: 2018.11.22 less作为插件时的使用方式
第二次: 2018.12.17 less 内部插件的介绍
  • 插件编写
class VariablesOutputPlugin {
  constructor(options) {
  }
  install(less, pluginManager, functions) {
    functions.add('pi', function() {
      console.log('xxxx')
      return Math.PI;
    });
  }
}

module.exports = VariablesOutputPlugin;
  • 插件参数
{
// pluginManager提供一个可以添加文件管理器,后处理器或访问者的持有者。
   install: function(less, pluginManager) {
   },
   // setOptions函数传递字符串。
   setOptions: function(argumentString) {
   },
   // printUsage函数用于解释选项。
   printUsage: function() {
   },
   
   minVersion: [2, 0, 0]
}
  • 插件使用
    普通webpack 配置在less-loaderoption中添加plugins: [ new VariablesOutputPlugin() ]
    vue-cli3中配置css.loderOptions.less.plugins: [ new VariablesOutputPlugin()]

  • Less.js插件的插件

    • visitor 在解析Less树的时候会挂载各种visitor

      原型链上的run函数会调用visitor.visit()开始一次对root处理流程,剩下的ToCSSVisiitor.prototype.visitDeclaration()负责处理一个declNode结构,会被在visitor内部调用执行
  • parse.js处理plugins最后加载 new Parser()

  • parser.js 先执行preProcessors通过new tree.Ruleset(null,this.parsers.primary()) 获取root (less-tree树形结构)最后开始执行visitors

new visitors.ImportVisitor(imports, finish).run(root)
  • 执行流程:
less.render
➣ parse.js(addPlugin)
➣ parse.js--end(new Parser)
➣ parser.js(preProcessors)
➣ parser.js--end(new Visitors)
➣ pares-tree.js(postProcessors)
  • 插件简介
    • file-manager 文件管理less.environment.addFileManager(new plugin(less));
    • postprocess 后处理器 pluginManager.addPostProcessor( new postProcessor());
    • preprocess 预处理器 pluginManager.addPreProcessor( new preProcessor() );
PreProcessor.prototype = {
  var PreProcessor = function () {}
  process: function (src, extra) {
    // src 为文本信息,为内存文本信息,非真实文件信息 例如:
    // @import "../variable.less"; .classname {.mixins()}
    let result = ''
    let currentDirectory = extra.fileInfo.currentDirectory // 当前文件所在文件夹
    let filename = extra.fileInfo.filename // 当前文件地址
    result = src + injected
    return result // 返回新的内存文本信息,本地文件未改变
  }
}
  • visitor 处理less文件,再默认的visitor之前执行,最后的visitorless处理成CSS
    var RemoveProperty = function(less) {
        this._visitor = new less.visitors.Visitor(this);
    };

    RemoveProperty.prototype = {
        isReplacing: true,
        run: function (root) {
            const variables = root.variables(); // 获取全部变量
            return this._visitor.visit(root);
        },
        visitDeclaration: function (ruleNode, visitArgs) {
            if (ruleNode.name != '-some-aribitrary-property') {
                return ruleNode;
            } else {
                return [];
            }
        }
    };
  • 待更新
    • tree对象的方法属性
    • functions
    • ruleset等相关的节点
更新中···

优质广告供应商

广告是为了更好地支持作者创作