从 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']