目前,vue-cli初始化的项目中已经自动帮我们配置好postcss了,而其中我们非常常用的一个插件就是autoprefixer,浏览器属性前缀自动补全:
例如我写一个需要兼容属性:
.head {
display: flex;
}
编译后的自动帮我们补全了display:flex;
相关的浏览器前缀,如图:
如此一来,我们便不再需要手动写私有前缀,这样极易出错,写起来也很累.即使我们通过less/sass等定义一些minxin.less来出来兼容的问题,还是没有这种方式暴力.
那么假如我想改变一些兼容的需求呢,例如我对某个浏览器的某个版本需要兼容或者其他兼容需求,我们可以自行配置。下面打开我们的package.json文件,拉倒最底下:
可以看到这里的browerslist,就可以配置我们的兼容需求vue官网的cli这块有介绍到(附上说明的传送门,不过是英文说明哦,英文不好的小伙伴记得翻译一下),原文如下:
However there is a caveat. browserslist recommends defining the target in a common place like package.json or in a .browserslistrc config file. This allows tools like autoprefixer and eslint-plugin-compat to share the config. For this template, browserslist is configured in the package.json
大致翻译一下,就是:
这有一个警告:browserslist
建议我们在package.json
文件或者.browserslistrc
的配置文件中进行定义目标。这就允许autoprefixer
和eslint-plugin-compat
去共享此配置。对于这个模板,browserslist
在package.json
中是这样配置的:
{
"...": "...",
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
还有一个主意点,原文如下:
But the latest stable release of babel-preset-env
, v1.6.1
does not support loading the config from package.json
. So the target environment is repeated in .babelrc
. If you wish to change your target environment, please be sure to update both package.json
and .babelrc
. Note that this has been fixed in the beta version(@babel/preset-env@7.0.0-beta.34
) and the template will be updated once it is out of beta.
大致翻译一下:
但是babel-preset-env
插件的v1.6.1
最新稳定版不支持从package.json
中加载配置,所以目标环境在.babelrc
文件中重复了。如果你想改变你的目标环境,请确保同时更新package.json
和.babelrc
。注意:这些已经被固定在外部测试版(@babel/preset-env@7.0.0-beta.34
)中,一旦他发布外部测试版,vue的模板也将更新。
这里列举一下,browserslist
的其他常见参数:
> 5%
: 浏览器版本的全球占有率(这里指兼容浏览器版本全球占有率超过5%的)>=
,<
和<=
> 5% in US
: 在美国的占有率。更多点击这里> 5% in alt-AS
: 在亚洲的占有率。更多点击这里> 5% in my stats
: uses custom usage data.cover 99.5%
: most popular browsers that provide coverage.cover 99.5% in US
: same as above, with two-letter country code.cover 99.5% in my stats
: uses custom usage data.extends browserslist-config-mycompany
: take queries frombrowserslist-config-mycompany
npm package.ie 6-8
: 选择要兼容的浏览器版本,例如兼容ie6-8Firefox > 20
: 火狐版本更新大于20的,>=
,<
和<=
都可以使用.iOS 7
: 直接兼容ios 7的浏览器.Firefox ESR
: 最新的[火狐ESR ]版本.unreleased versions
orunreleased Chrome versions
: 兼容内部测试版或者外部测试版last 2 major versions
orlast 2 iOS major versions
: all minor/patch releases of last 2 major versions.since 2015
orlast 2 years
: 兼容2015年之前的版本(或者since 2015-03
和since 2015-03-10
).dead
:last 2 version
兼容的数览器最新两个版本,但是其全球覆盖率小于0.5%且官方不再支持维护或者更新超过2年,这些也是要去兼容的。如果不想去兼容可以使用not dead
现在的浏览器版本是:IE 10
,IE_Mob 10
,BlackBerry 10
,BlackBerry 7
,OperaMobile 12.1
.last 2 versions
: 兼容每个浏览器最新的两个版本.last 2 Chrome versions
: 兼容chrome最新的两个版本defaults
: Browserslist的默认兼容 (> 0.5%, last 2 versions, Firefox ESR, not dead
),即:需要兼容全球覆盖率大于0.5%、每个浏览器的最新两个版本、火狐的最新esr版本、还没死掉了的浏览器。这里死掉的定义去看上面的dead
的定义not ie <= 8
: 去兼容这些浏览器版本之外的其他版本
这里送上browserslist
的官方github文档地址。更多信息请参考其文档。
待后面补全更多vue的webpack模板中,postcss的更多信息及有趣的用法。
喜欢就收藏一下吧!
今天的文章说说vue项目中自动添加前缀的那些事分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/19128.html