webpack实现一个行内样式px转vw的loader示例


Posted in Javascript onSeptember 13, 2018

需求

自从有了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。

开始行动

1、了解loader的实现原理

写一个loader很简单,传入source,干些坏事,干完之后,返回处理过的source。source对应的是每一个通过loader匹配到的文件。

module.exports = function (source) {
 // 干些坏事
 return source
}

2、如何让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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
Feb 18 Javascript
用jquery实现下拉菜单效果的代码
Jul 25 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
JQuery选择器、过滤器大整理
May 26 Javascript
js实现华丽的九九乘法表效果
Mar 29 Javascript
深入理解ES7的async/await的用法
Sep 09 Javascript
打字效果动画的4种实现方法(超简单)
Oct 18 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
详解vuex的简单todolist例子
Jul 14 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
vue实现循环滚动列表
Jun 30 Javascript
vue项目开发中setTimeout等定时器的管理问题
Sep 13 #Javascript
详解react内联样式使用webpack将px转rem
Sep 13 #Javascript
详解webpack 热更新优化
Sep 13 #Javascript
Vue中使用 setTimeout() setInterval()函数的问题
Sep 13 #Javascript
Angularjs之ngModel中的值验证绑定方法
Sep 13 #Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
Sep 13 #Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 #Javascript
You might like
PHP学习笔记之数组篇
2011/06/28 PHP
php调用shell的方法
2014/11/05 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
Laravel中的chunk组块结果集处理与注意问题
2018/08/15 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
csdn 批量接受好友邀请
2009/02/19 Javascript
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
Jquery通过JSON字符串创建JSON对象
2014/08/24 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
在JavaScript中如何解决用execCommand(
2015/10/19 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
2015/11/30 Javascript
基于jQuery的Web上传插件Uploadify使用示例
2016/05/19 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
js断点调试经验分享
2017/12/08 Javascript
Vue-cli项目获取本地json文件数据的实例
2018/03/07 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
Vue组件系列开发之模态框
2019/04/18 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
vue 避免变量赋值后双向绑定的操作
2020/11/07 Javascript
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
Python编程二分法实现冒泡算法+快速排序代码示例
2018/01/15 Python
OPENCV去除小连通区域,去除孔洞的实例讲解
2018/06/21 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
用python实现刷点击率的示例代码
2019/02/21 Python
Gauss-Seidel迭代算法的Python实现详解
2019/06/29 Python
python 解决cv2绘制中文乱码问题
2019/12/23 Python
css3实现针线缝合效果(图解步骤)
2013/02/04 HTML / CSS
css3+jq创作含苞待放的荷花
2014/02/20 HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
小学生成长感言
2014/01/30 职场文书
公司年终奖分配方案
2014/06/16 职场文书
工程部文员岗位职责
2015/02/04 职场文书
环保建议书作文300字
2015/09/14 职场文书