cnpm导致postcss-pxtorem不生效问题
最近一个手机web端使用postcss-pxtorem解决像素坐标转rem的问题,由于使用了vant,而UI出图按标准750px像素宽出图。所以为了兼容vant 375px像素宽,所以增加了postcss.config.js 分别对vant模块和项目本身设置不同的基准值,本地开发都没有问题,但是正式环境通过Jenkins打包时发现vant组件整体都缩小了一倍,明显是postcss.config.js 没有生效。
const { sep } = require('path') module.exports = ({ file }) => { // 解决vant设计稿宽度为350px而项目设计稿宽度为750px的问题 const rootValue = file.dirname.indexOf('node_modules' + sep + 'vant') !== -1 ? 37.5 : 75 return { plugins: { autoprefixer: { overrideBrowserslist: [ 'Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8' ] }, 'postcss-pxtorem': { rootValue: rootValue, propList: ['*'] } } } }
修改配置打印编译时具体文件路径信息,看对应rootValue是否计算错误:
// 解决vant设计稿宽度为350px而项目设计稿宽度为750px的问题 const rootValue = () => { console.log(file.dirname, 'node_modules' + sep + 'vant') return file.dirname.indexOf('node_modules' + sep + 'vant') !== -1 ? 37.5 : 75 }
正式环境上发现编译时使用的vant js却是输出如下日志:
/root/svn/workspace/qa_xxxxx/node_modules/_vant@2.10.10@vant/lib node_modules/vant
目录变成奇怪的node_modules/_vant@2.10.10@vant/lib目录,而不是正常node_modules/vant 重新检查了Jenkins配置,发现其打包时使用了cnpm打包,我们知道国内npm比较慢所以很多运维这块使用了cnpm进行了项目打包。但是对于研发来说其实比较拒绝使用该镜像库,因为其对依赖管理做了自己的定制老是爱出一些奇葩问题,问题找到改为npm打包解决!!!!