美文网首页前端开发那些事大前端让前端飞
从 PostCSS 插件,体验编码到发布全过程

从 PostCSS 插件,体验编码到发布全过程

作者: 颜漠笑年 | 来源:发表于2018-08-26 00:47 被阅读80次

    因项目的需求,自己动手写了一个 PostCSS 插件 postcss-px2vw,主要用于将 px 转成 vwremrem 作为回退模式。也刚好借此机会总结一下 npm 包的发布流程,文章还会介绍到七牛云图片的使用与上传相关的技巧,以及期间遇到的一些问题。

    为什么需要它

    转换 px 单位的插件有很多,知名的有 postcss-px-to-viewportpostcss-pxtorem,前者是将 px 转成 vw,后者是将 px 转成 rem

    起初是看了大漠的一篇文章《如何在Vue项目中使用vw实现移动端适配》,于是怀着激动的心情,就在项目中也使用 vw 来做移动端的适配。该文章大力推行用 vw 代替 rem 做适配,在amfe-flexible 项目文档中也推荐 vw 的替代方案。但是考虑到移动端对 vw 的支持情况不如 rem,所以仍有很多项目都选择使用 rem 来布局。于是就想到将 rem 作为一种回退机制,或许觉得没必要,直接放弃 vw 使用 rem 不就完了?确实,不过既然是折腾,也就不需要那么多理由了,其实饿了么平台就用了此方案。

    关于移动端适配方案,也有一些个人的亲身体会,有时间另启一篇文章详细总结一下

    实现方案

    首先,得提一下 CSS 样式的回退原理:当 CSS 遇到无法识别的一些样式时,不会报错,而是忽略它。并且后面的样式声明比前面的样式声明权重要高(也就是会覆盖前面的样式)。所以,我们要达到的效果是这样的:

    .class {
        margin-top: 2rem;
        margin-top: 20vw;
    }
    

    浏览器会优先使用第二个 margin-top: 20vw;,如果不支持该声明就会直接忽略它,并使用第一个 margin-top: 2rem;

    要实现这样的效果,一开始想到的是同时使用上面介绍到的两款插件,设置 postcss-pxtorem 的参数 replace: false,最后的结果是这样的:

    .class {
        margin-top: 20vw;
        margin-top: 2rem;
    }
    

    虽然最后结果同时保留了两种单位,但是优先使用的是 rem,这并不能满足我们的需求。原因也很简单,看 postcss-pxtorem 源码就会知道,设置 replace: false 时,它会在当前样式下面插入转换后的结果。而 postcss-px-to-viewport 是不能设置 replace 的,所以,无论如何配置,rem 单位始终会在 vw 的下面。

    基于这个点,就可以编写我们自己的代码了。

    代码实现

    打开 postcss-px-to-viewport 源码,其实也就短短的几十行代码。就算没写过 PostCSS 插件,看到源码,依葫芦画瓢,也能写一个适合自己的插件来。这是修改过后的源码:

    'use strict';
    
    var postcss = require('postcss');
    var objectAssign = require('object-assign');
    
    module.exports = postcss.plugin('postcss-px2vw', function (options) {
      var opts = objectAssign({
        viewportWidth: 750,
        unitPrecision: 5,
        rootValue: 75,
        minPixelValue: 1
      }, options);
    
      var pxRegex = /"[^"]+"|'[^']+'|url\([^\)]+\)|(\d*\.?\d+)px/ig;
    
      return function (css) {
        css.walkDecls(function (decl, i) {
          if (decl.value.indexOf('px') === -1) return;
          var value = decl.value;
          if (opts.viewportWidth) {
            var pxReplaceForVw = createPxReplace(opts.viewportWidth / 100, opts.minPixelValue, opts.unitPrecision, 'vw');
            decl.value = value.replace(pxRegex, pxReplaceForVw);
          }
          if (opts.rootValue) {
            var pxReplaceForRem = createPxReplace(opts.rootValue, opts.minPixelValue, opts.unitPrecision, 'rem');
            if (opts.viewportWidth) {
              decl.parent.insertBefore(i, decl.clone({
                value: value.replace(pxRegex, pxReplaceForRem)
              }));
            } else {
              decl.value = value.replace(pxRegex, pxReplaceForRem);
            }
          }
        });
      };
    });
    
    function createPxReplace(perRatio, minPixelValue, unitPrecision, unit) {
      return function (m, $1) {
        if (!$1) return m;
        var pixels = parseFloat($1);
        if (pixels <= minPixelValue) return m;
        return toFixed((pixels / perRatio), unitPrecision) + unit;
      };
    }
    
    function toFixed(number, precision) {
      var multiplier = Math.pow(10, precision + 1);
      var wholeNumber = Math.floor(number * multiplier);
      return Math.round(wholeNumber / 10) * 10 / multiplier;
    }
    

    合并了两款插件的核心转换功能,并去掉了一些不常用的功能和配置项,实现最初的目的就行,尽量保持简单易用的原则。该插件只保留了 4 个可配置参数(viewportWidthrootValueunitPrecisionminPixelValue),具体使用说明可查看 项目的README.md 文档。

    发布到 npm 仓库

    本来只是为了项目的需要,没打算从项目中独立出现来的。一方面为了熟悉一下 npm 的发布流程,另一方面也是为了在自己的 github 仓库中保留一份记录。

    整个流程很简单,也就几步:

    1. 要发布到 npm 仓库,首先得新建一个项目。运行 npm init,填写相关参数说明;
    2. 登录 npm 账号:npm login,输入用户名密码以及邮箱。如果没有账号就去 npm官网 注册一个;
    3. 发布:npm publish,大功告成。

    不过现实往往没有理论那么容易,总会遇到一些问题。

    1. 如果你使用的是淘宝源,需要先切回官方源,使用 nrm 的话,只需 nrm use npm 即可;
    2. package.json 中的 name 不能与仓库中已有的项目重名。如果难以命名,可添加用户名前缀,如:@moohng/postcss-px2vw。添加用户前缀是不能直接 publish 到公有仓库中的,需要使用 npm publish --access=public
    3. 每次更新发布必须增加 package.json 中的版本号。

    七牛云的使用

    为什么会使用到七牛云?这本是八竿子也打不着的东西。其实,也就是为了学别人在项目的 README.md 文档最后贴一张个人的收款二维码。先别想其他,就贴一张图本身而言,其实很简单,就是在 markdown 语法中插入一张图片链接地址。

    为了一张图片的链接地址,就把七牛云也整一遍?的确,就是出于这个目的于是就研究了一遍七牛云这东西。简单的上传无外乎就是登陆到七牛云平台,然后拽一张图片上去,链接地址就有了。可是,作为一个高大上的程序猿,怎能如此将就,当然得有一套不同寻常的方式了。

    最终要达到的效果就是得到一张上传图片的链接地址:http://static.moohng.com/FrEihC8JSWMtsxtnDUpQiuaL9ZbE,自定义域名 + 图片hash值。

    域名配置

    要配置自定义域名,首先得拥有一个已经备案过的域名。然后在七牛云的融合CDN菜单下可以添加域名:

    img

    接下来在域名管理平台配置 CNAME,CNAME 值可在刚添加的域名下查看。如此一来,以后访问七牛云上的资源就可以直接通过自定义域名来访问了。

    图片上传

    获取上传 token

    实现上传最关键的就是要有一个 token,token 的生成在官方文档中都有说明。不过我们不用自己写算法,官网已经用多种语言实现了封装。前端可参考Node.js SDK,简单实现:

    新建一个项目 demo,初始化 npm init,然后安装七牛云SDK npm install qiniu

    // index.js
    var qiniu = require('qiniu');
    
    // 可在七牛云查看
    var accessKey = 'accessKey';
    var secretKey = 'secretKey';
    
    var mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
    
    var options = {
      scope: 'moohng', // 存储空间名称
    };
    
    var putPolicy = new qiniu.rs.PutPolicy(options);
    var uploadToken = putPolicy.uploadToken(mac);
    
    console.log(uploadToken);
    

    其中,accessKeysecretKey 可在七牛云个人中心查看。

    在 Nodejs 环境下运行代码,node index.js,得到 token。

    上传

    上传地址可在七牛云开发者中心查看,不同地区的地址不一样。例如,华南地区:http(s)://upload-z2.qiniup.com

    本来是想写一个图形化界面,用来上传图片。无赖自己比较懒,既然拿到了最关键的 token,也有了上传地址,至于图形化界面有时间再说吧。

    作为程序员,逼格最高的莫过于命令行了。于是,就想到了 Linux 下常用的 curl 命令。

    $ curl http://upload-z2.qiniup.com -F "file=@./img_example.png" -F "token=这里是生成的token"
    

    然后一个优雅的回车,一切就结束了!不出意外会返回一个 key,这个 key 拼接上之前自定义的域名,就可以为所欲为了。

    关于 curl 命令,-F 表示上传文件,文件参数与其他参数必须分开写,文件参数使用 @+文件路径。

    更多的使用说明及相关参数请参考七牛云开发文档

    图片压缩

    七牛云提供了多个图片处理工具,裁剪、缩放、压缩等。如果放到 github 上的图片太大,可能会加载不出来,所以,对图片进行缩放和压缩是很有必要的。

    处理之前:http://static.moohng.com/FrEihC8JSWMtsxtnDUpQiuaL9ZbE (85.1k)

    图片处理之前

    处理之后:http://static.moohng.com/FrEihC8JSWMtsxtnDUpQiuaL9ZbE?imageView2/1/w/320/h/320/q/75|imageslim (17.1k)

    图片处理之后

    最后

    关注我,不定期更新前端技术型文章。

    相关文章

      网友评论

        本文标题:从 PostCSS 插件,体验编码到发布全过程

        本文链接:https://www.haomeiwen.com/subject/oluniftx.html