webpack系列——實現一個行內樣式px轉vw的loader

需求

自從有了postcss來處理css文件，咱們能夠快速進行網站適配的開發，只須要改改參數，樣式按照設計稿的px寫，webpack編譯自動轉換成rem或者vw等。

可是，標籤內的px怎麼辦呢？postcss並不提供轉換這個的功能。

探索

啓動思路

我正在作一個vue項目，恰好想要實現上面提到的需求，例以下面的例子

<h3 style="font-size: 28px;margin-top: 10px" width="500px">Test</h3>

我但願他能根據我設置的基準值自動轉換成vw。

<h3 width="00vw" style="font-size: 00vw; margin-top: 00vw;">Test</h3>

要想實現這樣一個東西，離不開編譯工具webpack，webpack有loader、plugin，用什麼好呢？經過找資料，我從一篇px轉rem的文章中獲得了提示 react內聯樣式使用webpack將px轉rem

沒錯，就是webpack-loader

寫一個webpack loader，在webpack編譯階段，讀取vue文件裏面的內容，經過正則識別出須要轉換的像素px，再經過公式轉換成vw。

開始行動

一、瞭解loader的實現原理
寫一個loader很簡單，傳入source，幹些壞事，幹完以後，返回處理過的source。source對應的是每個經過loader匹配到的文件。

module.exports = function (source) {
  // 幹些壞事
  return source
}

二、如何讓loader幹壞事
先看一個簡單的vue文件，一般分爲3部分，<template>、<script>、<style>

<template>
  <div>
    <h3 style="font-size: 28px;margin-top: 10px" width="500px">Test</h3>
  </div>
</template>

<script>
  export default {
    name: '',
    components: {},
    created () {},
    mounted () {},
    methods: {}
  }
</script>

<style lang="less">
  h3 {
    font-size: 20px;
  }
</style>

咱們知道<style>部分已經有postcss會進行轉換處理，因此我把重點放到了<template>內部的 「00px」。

其實source對應的就是這樣一個vue文件，該例子中有28px、10px、500px是須要轉換的目標，首先用正則把他們都找出來。

• 先把template部分提出來，防止把style部分也轉換了

const template = /<template>([\s\S]+)<\/template>/gi


// 匹配出來的部分
<template>
  <div>
    <h3 style="font-size: 28px;margin-top: 10px" width="500px">Test</h3>
  </div>
</template>

• 匹配px的正則

const ZPXRegExp = /(\d+)px/

• 對template裏面的px進行轉換

module.exports = function (source) {
  let _source = ''
  // 若是當前的source裏面存在template
  if (template.test(source)) {
    // 匹配template部分
    _source = source.match(template)[0]
  }
  // 匹配出template裏面的px
  let pxGlobalRegExp = new RegExp(ZPXRegExp.source, 'ig')
  if (pxGlobalRegExp.test(_source)) {
    // px轉換vw，核心部分
    let $_source = _source.replace(pxGlobalRegExp, createPxReplace(defaults.viewportWidth, defaults.minPixelValue, defaults.unitPrecision, defaults.viewportUnit))
    // 轉換以後替換回source中，返回函數值
    return source.replace(template, $_source)
  } else {
    //沒有就不轉，直接返回
    return source
  }
}

• px轉vw的公式

我使用的是 postcss-px-to-viewport 內部實現的轉換公式

function createPxReplace (viewportSize, minPixelValue, unitPrecision, viewportUnit) {
  // 不用好奇$0, $1是怎麼來的，他們是replace第二個參數提供的
  return function ($0, $1) {
    if (!$1) return
    var pixels = parseFloat($1)
    if (pixels <= minPixelValue) return
    return toFixed((pixels / viewportSize * 100), unitPrecision) + viewportUnit
  }
}
function toFixed (number, precision) {
  var multiplier = Math.pow(10, precision + 1),
    wholeNumber = Math.floor(number * multiplier)
  return Math.round(wholeNumber / 10) * 10 / multiplier
}

• 使用和postcss-px-to-viewport相似的配置

一個基本的配置大概包含這些信息

let defaultsProp = {
  unitToConvert: 'px',
  viewportWidth: 750,
  unitPrecision: 5,
  viewportUnit: 'vw',
  fontViewportUnit: 'vw',
  minPixelValue: 1
}

• 給webpack-loader加上option

const loaderUtils = require('loader-utils')

const opts = loaderUtils.getOptions(this)
const defaults = Object.assign({}, defaultsProp, opts)

好了，如今咱們實現了一個能夠幹壞事的loader，😯不，是作好事！

咱們來看看轉換成果

<h3 width="66.66667vw" style="font-size: 3.73333vw; margin-top: 1.33333vw;">Test</h3>

反思

雖然實現了我一開始的需求，可是內心老是不淡定，由於還些坑沒有想明白，後續若是想明白了，再進行完善。

源碼

style-vw-loader