撸一个px2rem-loader，并拓展一些丰富的功能
前言
有没有面试的时候，经常被问怎么写一个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文件后，执行编译查看控制台输出
接下来就是处理传入进来的源代码，最后把经过加工处理的代码返回给下一个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配置的正则的资源文件不做任何处理
那么你还能想到什么可以扩展的吗？欢迎评论区留言，谢谢！