likes
comments
collection
share

撸一个px2rem-loader，并拓展一些丰富的功能

作者站长头像
站长
· 阅读数 74

前言

有没有面试的时候，经常被问怎么写一个webpack的loader或者plugin呢？这时候不知道你是不是一脸懵逼。那么这篇文章我们一起来学一下loader的实现，并亲手写一个阉割版的px2rem-loader并为官方的px2rem-loader拓展一些实际项目中不能满足我们使用的功能

loader的基本介绍

loader的基本使用

loader的本质是对源代码进行转换，预处理源代码内容。webpack默认只能处理.js, .json文件，实际项目中会有很多类型的文件，这时候就需要提供loader为webpack拓展处理其它文件的能力。

本篇文章重在编写loader，不在这里介绍loader的基本使用，如果有不熟悉使用请点击链接官方文档传送门

自定义loader的方式

编写一个loader官方文档传送门，官方文档里边介绍了本地开发如何设置loader，loader编写准则，loader的相关工具库...

编写loader还需要用到loader API，文档里边介绍了loader的几种写法以及loader上下文

编写loader归纳下来分为如下几种方式：

1、同步loader

function loader(source, sourceMap, meta){
  return targetCode;
  // 或者
  return this.callBack(null, code, sourceMap, meta);
}

2、异步loader

function loader(source, sourceMap, meta){
  const callBack = this.async();
  setTimeout(()=>{
    callBack(null, targetCode, sourceMap, meta)
  }, 2000);
}

3、raw loader

webpack默认读取资源是字符串的形式，如果需要获取Buffer内容，需要配置loader的raw属性loader.raw = true;

function loader(source, sourceMap, meta){
  return targetCode;
}
loader.raw = true;
module.exports = loader;

编写自己的my-px2rem-loader

本文章涉及的源码地址在文章末尾，如果需要请到文章末尾查看

这里默认大家都熟悉rem适配和px2rem-loader以及webpack的使用，不熟悉的同学先去学习一下

本地loader的引入方式

在项目根目录下创建loaders文件夹，新建my-px2remm-loader.js先写一个没有任何功能的loader

function loader(source){
  console.log('当前模块', this.resource) // 解析的资源的路径
  console.log(source); // 上一个loader传过来的代码
  console.log("===========");
  return source;
}
module.exports = loader;

先看下官方px2rem-loader在webpack中的配置，以css文件为例，后边会参照该配置实现自己的my-px2rem-loader：

{
  test: /\.css$/,
  use: [
    { loader:MiniCssExtractPlugin.loader },
    'css-loader',
    {
      loader: 'px2rem-loader',
      options: {
        remUnit: 75, // rem的单位
        remPrecision: 6 // 计算后的rem小数点保留精度位数
      }
    }
  ]
}

options是px2rem-loader的参数配置，参数在loader函数内部可以获取到

那么本地开发loader的引入方式如下：

1、直接配置本地路径

{
  test: /\.css$/,
  use: [
    {
      loader: path.resolve(__dirname, '../loaders/my-px2rem-loader.js'),
      options: {
        remUnit: 75,
        remPrecision: 6
      }
    }
  ]
}

2、resolveLoader配置

  • 配置一个别名，把这个别名配置到loader属性
resolveLoader:{
  alias: {
    'my-px2rem-loader': path.resolve(__dirname, '../loaders/my-px2rem-loader.js')
  }
}
  • 配置查找目录，文件/文件夹名需要和配置的loader属性值一致
resolveLoader:{
  modules: ['loaders', 'node_modules']
}

正确引入本地my-px2rem-loader.js文件后，执行编译查看控制台输出

撸一个px2rem-loader，并拓展一些丰富的功能

接下来就是处理传入进来的源代码，最后把经过加工处理的代码返回给下一个loader即可

实现my-px2rem-loader

这里只实现2个功能

  • px->rem
  • 加 /* no */ 注释不参与转换

新建loaders/px2rem.js文件，px转rem的核心功能都在这个文件。官方的px2rem-loader真正使用的是px2rem插件的功能。所以我们这里先写px2rem的功能。代码如下：

const css = require('css') // css字符串转换ast，ast在转为css代码
const pxRegExp = /\b(\d+(\.\d+)?)px\b/; // px字符串的正则匹配
class Px2rem {
  constructor(config) {
    this.options = config;
  }
  //  传入css代码转换px->rem  
  generateRem(source) {
    let self = this;
    function processRules(rules) {
      for (let index = 0; index < rules.length; index++) {
        const rule = rules[index];
        const declarations = rule.declarations;
        if(declarations){
          for (let j = 0; j < declarations.length; j++) {
            const declaration = declarations[j];
            if (declaration.type === 'declaration' && pxRegExp.test(declaration.value)) {
              const nextDeclaration = declarations[j+1];
              // 检查下一个是不是注释，如果是注释检查是否等于no，no则不转换rem
              if(nextDeclaration && nextDeclaration.type === 'comment'){
                  if(nextDeclaration.comment.trim() === 'no') {
                    declarations.splice(j + 1, 1);
                  }else {
                    declaration.value = self._getCalcValue('rem', declaration.value)
                  }
              }else {
                declaration.value = self._getCalcValue('rem', declaration.value)
              }
            }
          }
        }
      }
    }
    // css转换为ast
    var astObj = css.parse(source)
    // 转换ast
    processRules(astObj.stylesheet.rules);
    // 生成
    const targetSource = css.stringify(astObj)
    return targetSource;
  }

  // 转换type单位的值，保留小数点位数
  _getCalcValue(type, value) {
    const { remUnit, remPrecision } = this.options;
    return value.replace(pxRegExp, (_, $1) => {
      let val = (parseFloat($1) / remUnit).toFixed(remPrecision);
      return val + type;
    })
  }
}
module.exports = Px2rem;

完善loaders/my-px2rem-loader.js代码

// 安装完webpack之后就有的
const loaderUtils = require('loader-utils')
const Px2rem = require('./px2rem')

function loader(source, sourceMap){
  // 获取配置的参数remUnit, remPrecision
  const options = loaderUtils.getOptions(this); 
  const px2rem = new Px2rem(options);
  // 转换px->rem
  const targetSource = px2rem.generateRem(source);
  return targetSource;
}
module.exports = loader;

在执行到该loader时（这个函数并不是纯函数，它是有状态的。存在loader上下文，可以通过this访问上下文中的属性，具体请查看loader上下文），通过loader-utils包获取配置的参数。然后通过Px2rem对象把px转换成rem

在loaders/px2rem.js中使用了一个非常重要的css包，该包负责css代码和ast语法树（js对象）相互转换

loaders/px2rem.js文件中核心方法generateRem(source)先把css源代码转换成ast，然后遍历js对象处理每个节点，根据传入进来的参数把需要转换的节点转成rem单位。最终再把转换后的ast通过css插件转换成css代码即可

这里只是抛砖引玉，写的比较简单，源码考虑的情况比较多比如@media以及@keyframes下的代码都进行了转换处理。有兴趣的可以学习一下px2rem源码。

拓展px2rem-loader

以上搞定了一个阉割版的px2rem-loader。如果需要和官方的功能保持一致，把源代码复制出来即可。

然后我们基于此可以为自己的my-px2rem-loader拓展一些丰富的配置项，比如

  • exclude 忽略某些文件夹下的文件或特定文件，例如忽略node_modules目录
  • include 如果设置了include，那将只有匹配到的文件才会被转换
  • selectorBlackList 忽略的css选择器

这里实现以下exclude功能，exclude可以传入单个正则，也可传入数组（数组中每一项必须是正则）

loaders/my-px2rem-loader.js修改如下：

const loaderUtils = require('loader-utils')
const Px2rem = require('./px2rem')

function isExclude(reg, file) {
  if (Object.prototype.toString.call(reg) !== '[object RegExp]') {
    throw new Error('options.exclude should be RegExp.');
  }
  return file.match(reg) !== null;
}

function loader(source, sourceMap){
  const options = loaderUtils.getOptions(this);
  const exclude = options.exclude;  // 当前模块的路径
  const resource = this.resource; // 获取当前处理的文件路径
  if(exclude){ // 处理忽略文件
    if (Object.prototype.toString.call(exclude) === '[object RegExp]') {
      if (isExclude(exclude, resource)) return source;
    } else if (Object.prototype.toString.call(exclude) === '[object Array]') {
      for (let i = 0; i < exclude.length; i++) {
        if (isExclude(exclude[i], resource)) return source;
      }
    } else {
      throw new Error('options.exclude should be RegExp or Array.');
    }
  }
  const px2rem = new Px2rem(options);
  const targetSource = px2rem.generateRem(source);
  return targetSource;
}
module.exports = loader;

以上代码加了对传入exclude属性的拦截处理，对于符合exclude配置的正则的资源文件不做任何处理

那么你还能想到什么可以扩展的吗？欢迎评论区留言，谢谢！

源码下载

转载自:https://juejin.cn/post/7124932025080872990
评论
请登录