摘要：本文以的源碼為學(xué)習(xí)對(duì)象，了解其工作機(jī)制以及封裝的思想。通過(guò)深入了解，我們總結(jié)了其封裝的思路，順帶學(xué)習(xí)了一下的抽象語(yǔ)法樹。

本文以px2rpx-loader的源碼為學(xué)習(xí)對(duì)象，了解其工作機(jī)制以及l(fā)oader封裝的思想。

1.前言

最近在了解mpvue框架的時(shí)候，對(duì)于其能夠?qū)崿F(xiàn)一套代碼兼容web和微信小程序（以下簡(jiǎn)稱小程序）的能力十分著迷，雖然小程序的MINA框架有著Vue的影子，但是無(wú)可否認(rèn)的，小程序做了很多有著自己風(fēng)格的封裝，如rpx單位，WXML中的 view, button, text等標(biāo)簽，與web有著較多的差異。

px2rpx-loader作為支持mpvue實(shí)現(xiàn)兼容web和小程序的設(shè)施之一，有一定值得我們學(xué)習(xí)的地方。

2.rpx介紹

對(duì)于rpx的概念和作用，此處引用微信官方的話說(shuō)，就是“在寫 CSS 樣式時(shí)，開(kāi)發(fā)者需要考慮到手機(jī)設(shè)備的屏幕會(huì)有不同的寬度和設(shè)備像素比，采用一些技巧來(lái)?yè)Q算一些像素單位。WXSS 在底層支持新的尺寸單位 rpx ，開(kāi)發(fā)者可以免去換算的煩惱，只要交給小程序底層來(lái)?yè)Q算即可”。

rpx可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)，規(guī)定屏幕寬為750rpx。

rpx的確很好用，大大減輕了開(kāi)發(fā)者對(duì)于兼容不同設(shè)備的工作量，雖然現(xiàn)在有很多移動(dòng)端設(shè)備兼容的方案，如阿里的flexible，但是小程序中用一個(gè)單位就能解決這個(gè)惱人的問(wèn)題，也是極好的。

3.px2rpx-loader的使用

讓我們回到實(shí)際業(yè)務(wù)中，假設(shè)現(xiàn)在設(shè)計(jì)師以iphoneX的尺寸為基礎(chǔ)，出了一套1125px * 2436px的設(shè)計(jì)圖，并且已經(jīng)完成了以px單位為基礎(chǔ)的web移動(dòng)端頁(yè)面的還原，現(xiàn)在需要將已經(jīng)完成了的頁(yè)面遷移到小程序中，因此需要解決寬高的轉(zhuǎn)換和單位的轉(zhuǎn)換，我們接下來(lái)通過(guò)一個(gè)測(cè)試項(xiàng)目對(duì)px2rpx-loader的使用進(jìn)行介紹。

px2rpx-loader可以依靠webpack來(lái)實(shí)現(xiàn)，過(guò)程如下：

( 1 ) npm install px2rpx-loader // 在目標(biāo)文件夾中安裝loader包

( 2 ) 在webpack.config.js中進(jìn)行相應(yīng)配置

  { test: /.css$/,

        use: [

           style-loader,

           css-loader,

           px2rpx-loader?rpxUnit=1.5 // px轉(zhuǎn)換為rpx的配置，rpxUnit=1.5為配置參數(shù)，后面會(huì)介紹

        ] }

根據(jù)該配置，在webpack進(jìn)行打包的時(shí)候就會(huì)對(duì)src目錄下的 index.css 文件進(jìn)行預(yù)處理。

( 3 ) 此外，我們需要簡(jiǎn)單寫一下index.html和index.css的測(cè)試代碼

index.html

index.css

.container {
    width: 1125px;
    height: 2436px;
    background-color: pink;
}

( 4 ) 在控制臺(tái)中通過(guò)webpack命令進(jìn)行打包

$ webpack

最后可以在瀏覽器調(diào)試窗口中看到（之所以被線劃掉，是因?yàn)闉g覽器不支持rpx單位的）

此時(shí)單位已經(jīng)轉(zhuǎn)換完成，并且也根據(jù)比例調(diào)整為750rpx寬，此時(shí)的類為container的div元素可以在小程序中適應(yīng)各個(gè)尺寸的設(shè)備了（當(dāng)然在小程序中是沒(méi)有div標(biāo)簽的，最終的實(shí)現(xiàn)還需要mpvue-loader將div標(biāo)簽轉(zhuǎn)換為小程序中的view標(biāo)簽）。

4.px2rpx-loader源碼解析

從上面的一個(gè)測(cè)試中可以看出，其實(shí)px2rpx-loader實(shí)現(xiàn)的功能并不復(fù)雜，主要實(shí)現(xiàn)了兩個(gè)轉(zhuǎn)換：

( 1 ) 將寬度的數(shù)字部分按比例縮小

( 2 ) 將px單位改成rpx單位

功能雖然簡(jiǎn)單，但我們也不妨了解其內(nèi)部實(shí)現(xiàn)的原理，讓我們學(xué)習(xí)封裝loader的一些思想。

loader中第一個(gè)解決的問(wèn)題是獲取到webpack.config.js中的配置參數(shù)，可以借助loaderUtils模塊實(shí)現(xiàn)。

var loaderUtils = require(loader-utils)   // 獲取loader的配置項(xiàng)

var options = loaderUtils.getOptions(this) // 獲取如上文webpack配置中，px2rpx-loader?rpxUnit=1.5’中的rpxUnit=1.5

然后，loader中應(yīng)該預(yù)設(shè)好默認(rèn)的配置，這樣在使用loader時(shí)就可以只寫部分配置或者直接使用默認(rèn)配置，這里借助了extend模塊實(shí)現(xiàn)。

var extend = require(extend); // 用于克隆對(duì)象

var defaultConfig = { … }; // 默認(rèn)配置項(xiàng)

var config = { };

extend(this.config, defaultConfig, options);

// 在后面進(jìn)行單位轉(zhuǎn)換的函數(shù)中，將config變量作為實(shí)參傳入，進(jìn)行相應(yīng)的處理

extend模塊是用來(lái)克?。ɑ蛘呓凶鐾卣梗┒鄠€(gè)對(duì)象的，熟悉jQuery的朋友應(yīng)該都知道$.extend() 方法，其接受多個(gè)對(duì)象作為參數(shù)，以參數(shù)中第一個(gè)對(duì)象為目標(biāo)，將參數(shù)中其他對(duì)象合并到目標(biāo)對(duì)象上，如果第一個(gè)參數(shù)為true，那么就會(huì)實(shí)現(xiàn)深克隆。

loader需要處理的對(duì)象的是css代碼，但是css代碼并不是JS能夠直接能夠進(jìn)行邏輯處理的對(duì)象，因此需要使用css模塊進(jìn)行css代碼到css AST（css抽象語(yǔ)法樹）的轉(zhuǎn)換，這是loader中關(guān)鍵的一步

var astObj = css.parse(cssText);  // 解析css文件，構(gòu)建css AST樹，cssText形參由webpack將css代碼作為實(shí)參傳入

經(jīng)過(guò)轉(zhuǎn)換后，css代碼會(huì)被轉(zhuǎn)換為JSON格式的對(duì)象，舉個(gè)例子：

//CSS代碼

body {

  background: #eee;

  color: #888;

}

//CSS AST

{

  "type": "rule",

  "selectors": [

    "body"

  ],

  "declarations": [

    {

      "type": "declaration",

      "property": "background",

      "value": "#eee",

      "position": {

        "start": {

          "line": 2,

          "column": 3

        },

        "end": {

          "line": 2,

          "column": 19

        }

      }

    },

    {

      "type": "declaration",

      "property": "color",

      "value": "#888",

      "position": {

        "start": {

          "line": 3,

          "column": 3

        },

        "end": {

          "line": 3,

          "column": 14

        }

      }

    }

  ]

}

在這個(gè)JSON對(duì)象中，記錄了代碼的位置（line, column），樣式的屬性名（property）和屬性值（value），樣式的類型（type），選擇器（selectors）等，通過(guò)這個(gè)JSON對(duì)象，可以很輕易的通過(guò)JS實(shí)現(xiàn)單位轉(zhuǎn)換了。

但是需要考慮到一個(gè)問(wèn)題，即在一個(gè)css文件中，可能并不需要把所有的px都轉(zhuǎn)換為rpx，如字體大小，不應(yīng)該隨著屏幕尺寸的增大而過(guò)度增大。所以load中允許通過(guò)一個(gè)特殊的注釋“ /*px*/ ”來(lái)進(jìn)行標(biāo)記，表明當(dāng)前的樣式不需要轉(zhuǎn)換。以之前的例子舉例，我們?cè)趇ndex.css中添加一個(gè)/*px*/注釋，表示height: 2436px; 這個(gè)屬性不需要轉(zhuǎn)換。

index.css

.container {

         width: 1125px;

         height: 2436px; /*px*/

         background-color: pink;

}

最后可以在瀏覽器調(diào)試窗口中看到結(jié)果不出所料，高度部分的樣式?jīng)]有被轉(zhuǎn)換。

單位轉(zhuǎn)換的邏輯很簡(jiǎn)單，只需要遍歷css AST的JSON對(duì)象，將沒(méi)有“ /*px*/ ”標(biāo)記的樣式代碼進(jìn)行數(shù)值部分的轉(zhuǎn)換，然后再拼接上“rpx”單位即可。

function _getCalcValue (value, config) { value即JSON中樣式屬性值，config即上文所說(shuō)整合過(guò)的配置參數(shù)

  var pxRegExp = /b(d+(.d+)?)pxb/; // 用來(lái)匹配形如“ 24.55px ”的正則

  function getValue(val) {

    return val == 0 ? val : val + ‘rpx’; // 將轉(zhuǎn)換后的數(shù)值拼接上’rpx’單位

  }

  return value.replace(pxRegExp, function ($0, $1) {

    return getValue($1 / config.rpxUnit); // 數(shù)值部分按比例轉(zhuǎn)換

  });

};

5.loader封裝思路整理

下圖對(duì)整個(gè)loader的思路做一個(gè)整理：

整個(gè)過(guò)程大致可以分為3部分，一是對(duì)配置參數(shù)的獲取和整合，二是css代碼和css AST的相互轉(zhuǎn)換，三是px單位到rpx單位的處理。舉一反三，我們不難想象出，其他的一些css預(yù)處理包也應(yīng)該是遵循著相似的邏輯來(lái)進(jìn)行，譬如px轉(zhuǎn)為rem，rem轉(zhuǎn)為rpx，或者是px轉(zhuǎn)vw等等。

通過(guò)深入了解px2rpx-loader，我們總結(jié)了其封裝的思路，順帶學(xué)習(xí)了一下css的抽象語(yǔ)法樹。在后面的工作或者學(xué)習(xí)中，我們也是可以嘗試封裝自己的loader，來(lái)進(jìn)行一些兼容和減少我們重復(fù)性的操作的。