说说vue项目中自动添加前缀的那些事

目前,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 from browserslist-config-mycompany npm package.
• ie 6-8: 选择要兼容的浏览器版本，例如兼容ie6-8
• Firefox > 20: 火狐版本更新大于20的， >=, < 和 <= 都可以使用.
• iOS 7: 直接兼容ios 7的浏览器.
• Firefox ESR: 最新的[火狐ESR ]版本.
• unreleased versions or unreleased Chrome versions: 兼容内部测试版或者外部测试版
• last 2 major versions or last 2 iOS major versions: all minor/patch releases of last 2 major versions.
• since 2015 or last 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的更多信息及有趣的用法。

喜欢就收藏一下吧！