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-loader 的option中添加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之前执行，最后的visitor将less处理成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等相关的节点

更新中···