前端开发那些事大前端让前端飞

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

2018-08-26  本文已影响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)

图片处理之后

最后

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

上一篇下一篇

猜你喜欢

热点阅读