从 v2 迁移到 v3
v3 版本相比于 v2, 主要是删去一些过时的功能,配置项,同时会改变插件的默认值,使得整体插件变得更易用,更容易安装 假如你没有用到什么复杂自定义配置,那么完全可以平滑升级上来。
配置项改动
删除的配置项
- 删去
replaceUniversalSelectorWith选项,使用cssSelectorReplacement.universal来代替,后者参数覆盖前者 - 删去
minifiedJs选项,现在完全遵从用户的配置,用户压缩就压缩,反之亦然 - 删去
jsEscapeStrategy选项,现在默认只有一种模式replace/ 不再提供regenerate模式 - 删去
customReplaceDictionary的complex模式,只内置simple模式 (你如果还要complex模式 ,可以从@weapp-core/escape引入,再传入customReplaceDictionary配置项即可) cssMatcher/htmlMatcher/jsMatcher/mainCssChunkMatcher/wxsMatcher不再能够传入glob表达式(例如**/*.html),现在都是传入一个方法:(name: string) => boolean。要兼容原先的glob表达式,你可以通过minimatch把glob表达式转化成正则来兼容原先的配置cssPreflightRange只存在一种模式,为all, 之前的view选项交给cssSelectorReplacement.universal进行托管
增加的配置项
rem2rpx: 类型rem2rpx?: boolean | rem2rpxOptions
rem 转 rpx 配置,默认 不开启,可传入配置项,配置项见 https://www.npmjs.com/package/postcss-rem-to-responsive-pixel
这个配置项代表插件内置了 postcss-rem-to-responsive-pixel ,不过默认不开启,传入一个 true 相当于传入配置:
{
// 32 意味着 1rem = 32rpx
rootValue: 32,
// 默认所有属性都转化
propList: ['*'],
// 转化的单位,可以变成 px / rpx
transformUnit: 'rpx',
}
当然你也可以传入 rem2rpxOptions 这样一个 object 进行自定义
为什么默认不开启?
- 为了从
2.x版本可以平滑的过渡到3.x - 从我的视角看,内置
postcss插件功能,虽然整体集成度上更高了,但是对其他开发者可能不是那么自由,比如在2.x时候,由于postcss-rem-to-responsive-pixel是外置的,所以开发者可以自由的决定它的加载顺序和加载逻辑,但是内置之后都是我决定的。不过内置好处也有,就是开箱即用
增强的配置项
cssChildCombinatorReplaceValue,cssSelectorReplacement.root,cssSelectorReplacement.universal现在都可以接受字符串数组了,它们可以自动展开,防止选择器格式化错误问题
修改的默认值
cssPreflightRange从'view'变为undefined, 现在all的作用变成了在tailwindcss变量注入区域的选择器,添加一个:not(not)的选择器作为全局选择器的替代cssSelectorReplacement.universal从'view'变为['view', 'text'], 这意味着*选择器会被展开成view,text以及对应方式cssChildCombinatorReplaceValue从'view + view'变为['view']replaceUniversalSelectorWith,jsEscapeStrategy,minifiedJs选项被删除,所以不再保留默认值
现在选项合并,数组默认行为变为覆盖,原先是合并
const options = getOptions(input,defaults)
defaults: ['a','b'], input:['c']
// before:
options == ['a','b','c']
// after:
options == ['c']
