因项目的需求，自己动手写了一个 PostCSS 插件 postcss-px2vw，主要用于将 px 转成 vw 和 rem，rem 作为回退模式。也刚好借此机会总结一下 npm 包的发布流程，文章还会介绍到七牛云图片的使用与上传相关的技巧，以及期间遇到的一些问题。
为什么需要它
转换 px 单位的插件有很多，知名的有 postcss-px-to-viewport 和 postcss-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 个可配置参数（viewportWidth、rootValue、unitPrecision、minPixelValue），具体使用说明可查看 项目的README.md 文档。
发布到 npm 仓库
本来只是为了项目的需要，没打算从项目中独立出现来的。一方面为了熟悉一下 npm 的发布流程，另一方面也是为了在自己的 github 仓库中保留一份记录。
整个流程很简单，也就几步：
- 要发布到 npm 仓库，首先得新建一个项目。运行
npm init，填写相关参数说明； - 登录 npm 账号：
npm login，输入用户名密码以及邮箱。如果没有账号就去 npm官网 注册一个； - 发布：
npm publish，大功告成。
不过现实往往没有理论那么容易，总会遇到一些问题。
- 如果你使用的是淘宝源，需要先切回官方源，使用
nrm的话，只需nrm use npm即可； -
package.json中的name不能与仓库中已有的项目重名。如果难以命名，可添加用户名前缀，如：@moohng/postcss-px2vw。添加用户前缀是不能直接publish到公有仓库中的，需要使用npm publish --access=public； - 每次更新发布必须增加
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);
其中，accessKey 和 secretKey 可在七牛云个人中心查看。
在 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）
图片处理之后
最后
关注我，不定期更新前端技术型文章。
网友评论