说说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的更多信息及有趣的用法。

喜欢就收藏一下吧！