webpack實(shí)現(xiàn)一個(gè)行內(nèi)樣式px轉(zhuǎn)vw的loader示例
需求
自從有了postcss來處理css文件，我們可以快速進(jìn)行網(wǎng)站適配的開發(fā)，只需要改改參數(shù)，樣式按照設(shè)計(jì)稿的px寫，webpack編譯自動轉(zhuǎn)換成rem或者vw等。
但是，標(biāo)簽內(nèi)的px怎么辦呢？postcss并不提供轉(zhuǎn)換這個(gè)的功能。
探索
啟動思路
我正在做一個(gè)vue項(xiàng)目，剛好想要實(shí)現(xiàn)上面提到的需求，例如下面的例子
<h3 style="font-size: 28px;margin-top: 10px" width="500px">Test</h3>
我希望他能根據(jù)我設(shè)置的基準(zhǔn)值自動轉(zhuǎn)換成vw。
<h3 width="00vw" style="font-size: 00vw; margin-top: 00vw;">Test</h3>
要想實(shí)現(xiàn)這樣一個(gè)東西，離不開編譯工具webpack，webpack有l(wèi)oader、plugin，用什么好呢？通過找資料，我從一篇px轉(zhuǎn)rem的文章中得到了提示 react內(nèi)聯(lián)樣式使用webpack將px轉(zhuǎn)rem
沒錯，就是webpack-loader
寫一個(gè)webpack loader，在webpack編譯階段，讀取vue文件里面的內(nèi)容，通過正則識別出需要轉(zhuǎn)換的像素px，再通過公式轉(zhuǎn)換成vw。
開始行動
1、了解loader的實(shí)現(xiàn)原理
寫一個(gè)loader很簡單，傳入source，干些壞事，干完之后，返回處理過的source。source對應(yīng)的是每一個(gè)通過loader匹配到的文件。
module.exports = function (source) {
// 干些壞事
return source
}
2、如何讓loader干壞事
先看一個(gè)簡單的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>部分已經(jīng)有postcss會進(jìn)行轉(zhuǎn)換處理，所以我把重點(diǎn)放到了<template>內(nèi)部的 “00px”。
其實(shí)source對應(yīng)的就是這樣一個(gè)vue文件，該例子中有28px、10px、500px是需要轉(zhuǎn)換的目標(biāo)，首先用正則把他們都找出來。
先把template部分提出來，防止把style部分也轉(zhuǎn)換了
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進(jìn)行轉(zhuǎn)換
module.exports = function (source) {
let _source = ''
// 如果當(dāng)前的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轉(zhuǎn)換vw，核心部分
let $_source = _source.replace(pxGlobalRegExp, createPxReplace(defaults.viewportWidth, defaults.minPixelValue, defaults.unitPrecision, defaults.viewportUnit))
// 轉(zhuǎn)換之后替換回source中，返回函數(shù)值
return source.replace(template, $_source)
} else {
//沒有就不轉(zhuǎn)，直接返回
return source
}
}
px轉(zhuǎn)vw的公式
我使用的是 postcss-px-to-viewport 內(nèi)部實(shí)現(xiàn)的轉(zhuǎn)換公式
function createPxReplace (viewportSize, minPixelValue, unitPrecision, viewportUnit) {
// 不用好奇$0, $1是怎么來的，他們是replace第二個(gè)參數(shù)提供的
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類似的配置
一個(gè)基本的配置大概包含這些信息
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)
好了，現(xiàn)在我們實(shí)現(xiàn)了一個(gè)可以干壞事的loader，😯不，是做好事！
我們來看看轉(zhuǎn)換成果
<h3 width="66.66667vw" style="font-size: 3.73333vw; margin-top: 1.33333vw;">Test</h3>
反思
雖然實(shí)現(xiàn)了我一開始的需求，但是心里總是不淡定，因?yàn)檫€些坑沒有想明白，后續(xù)如果想明白了，再進(jìn)行完善。
源碼
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于微信小程序靜默登錄和維護(hù)自定義登錄態(tài)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
這篇文章主要為大家詳細(xì)介紹了bootstrapTable的參數(shù)設(shè)置，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
JavaScript自定義等待wait函數(shù)實(shí)例分析
這篇文章主要介紹了JavaScript自定義等待wait函數(shù),實(shí)例分析了自定義等待函數(shù)的實(shí)現(xiàn)與使用技巧,需要的朋友可以參考下2015-03-03
利用Bootstrap Multiselect實(shí)現(xiàn)下拉框多選功能
這篇文章主要介紹了利用Bootstrap Multiselect實(shí)現(xiàn)下拉框多選功能，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
常用js,css文件統(tǒng)一加載方法(推薦) 并在加載之后調(diào)用回調(diào)函數(shù)
下面小編就為大家?guī)硪黄Ｓ胘s,css文件統(tǒng)一加載方法(推薦) 并在加載之后調(diào)用回調(diào)函數(shù)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義復(fù)選框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
JavaScript定時(shí)器設(shè)置、使用與倒計(jì)時(shí)案例詳解
這篇文章主要介紹了JavaScript定時(shí)器設(shè)置、使用與倒計(jì)時(shí)案例,詳細(xì)分析了javascript定時(shí)器的設(shè)置、取消、循環(huán)調(diào)用并附帶一個(gè)倒計(jì)時(shí)功能應(yīng)用案例,需要的朋友可以參考下2019-07-07
經(jīng)常使用的一些javascript方法，今天總結(jié)了一下，以便以后查詢，有需要的小伙伴可以參考下。2015-05-05
JVM是一種用于計(jì)算設(shè)備的規(guī)范，它是一個(gè)虛構(gòu)出來的機(jī)器，是通過在實(shí)際的計(jì)算機(jī)上仿真模擬各種功能實(shí)現(xiàn)的。JVM的內(nèi)存區(qū)域可以被分為：線程、棧、堆、靜態(tài)方法區(qū)。本文將介紹JVM的內(nèi)存模型，感興趣的小伙伴，可以參考下2021-06-06
在左側(cè)三級菜單導(dǎo)航想必大家都見到過吧，它的實(shí)現(xiàn)過程也并不復(fù)雜，下面有個(gè)不錯的示例，感興趣的朋友可以了解下2013-09-09